I'm beginning going crazy with extjs4 and form loading.
In my struts application, I have a simple form and i want to load JSON data.
The problem is that the data are correctly loaded from the server but never displayed.
Here is the code :
Ext.onReady(function(){
var formPanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.get('categoryForm'),
width: 340,
bodyPadding: 5,
waitMsgTarget: true,
url: '<s:url value="json/save" />',
method: 'POST',
loader: {
type: 'json',
root: 'category',
successProperty: 'success'
},
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
defaultType: 'textfield',
items: [{
name: 'category.id',
hidden: true
}, {
fieldLabel: "<s:text name="category.label"/>",
name: 'label',
allowBlank: false,
maxLength: 35
}, {
fieldLabel: "<s:text name="category.description"/>",
name: 'description',
xtype: 'textarea',
maxLength: 250
}, {
fieldLabel: '<s:text name="category.creationDate"/>',
name: 'creationDate',
xtype: 'datefield',
readOnly: true
}],
buttons: [{
text: "<s:text name="action.modify"/>",
handler: function() {
formPanel.getForm().submit();
}
}, {
text: "<s:text name="action.cancel"/>",
handler: function() {
formPanel.getForm().reset();
}
}]
});
formPanel.show();
formPanel.load({
url: '<s:url action="json/load"/>',
params: {
categoryId: <s:property value="categoryId"/>
}
});
});
The JSON data (intented) response :
{
"category":
{
"creationDate": "2012-04-14T22:29:52",
"description":"description",
"id":1,
"label":"Toto"
},
"errorMessage":null,
"success":true
}
Finally I found where was the problem.
The JSON response must contains the 'data' property instead of 'category'.
Replacing the property fill the form.
Related
I have 4 forms, which called to the main view by buttons through controller.
How I must to link fields of forms with Django database, through REST api?
For example I have form:
Ext.define('Foresto.view.forms.RenterData', {
extend: 'Ext.form.Panel',
title: 'Renter',
header: {
cls: 'header-cls'
},
xtype: 'foresto-renterdata',
layout: 'fit',
scrollable: true,
tools: [{
type: 'minimize',
handler: function() {
this.up("panel").hide();
}
}, {
type: 'save'
}, {
type: 'close',
handler: function() {
this.up("panel").close();
}
}],
requires: ['Foresto.view.forms.RenterType'],
url: 'save-form.php',
defaults: {
xtype: 'textfield',
labelWrap: true,
required: true,
afterLabelTextTpl: [
'<span style="color:red;font-weight:normal" data-qtip="Required">*</span>'
]
},
items: [{
xtype: 'foresto-rentertype',
label: 'Type',
name: 'rentertype'
}, {
xtype: 'selectfield',
label: 'Document',
name: 'document',
}, {
label: 'Document number',
name: 'document_num'
}, {
label: 'NAME',
name: 'name_represent'
}, {
label: 'Position',
name: 'position_represent'
}]
});
And values of
name: 'document'
From Django:
{"license","rent agreement","order", "ticket"}
Where I can to add api url? I have to create proxy store or I can add api into form?
Please help! thanks!
I'm creating an app that simply shows customers information on a table, and if a user is being clicked then a pop-up window shows up showing user's information in a form (name and email). Within this PopUp I want to be able to update customers name and email and then when clicking on Update button I want the new information to show up on the table right away. As of right now I'm able to populate the table with customers' information as well as binding their information with the Pop-up window. But since I'm still kind of new to ExtJS I'm not really sure how to make the update to show right away on the table after clicking on update button. I would really appreciate any help!. Thanks a lot.
Here's my code that works just fine.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug_1.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
]
});
Ext.onReady(function () {
// Ajax call
var usersFromAJAX = Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'customers'
}
}
});
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: usersFromAJAX,
id: 'user',
title: 'Employees',
iconCls: 'x-fa fa-users',
listeners: {
itemclick: function (view, index, item, record) {
var window = Ext.create('Ext.window.Window', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
record: record,
viewModel: {
data: {
employee: index.data// employee's name
}
},
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'firstname',
fieldLabel: 'First Name',
bind: '{employee.name}' // biding employee's name
},
{
xtype: 'textfield',
name: 'firstname',
fieldLabel: 'Email',
bind: '{employee.email}' // biding employee's name
},
{
xtype: 'toolbar',
docked: 'bottom',
style:{
background: "#ACCCE8",
padding:'20px'
},
items: ['->', {
xtype: 'button',
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
console.log("Updating name...");
// Need to add something in here
this.up('window').close();
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
// this.up('formpanel').destroy();
this.up('window').close();
//this.up('window').destroy();
}
}]
}]
})
window.show();
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: Ext.getElementById("myTable")
});
});
</script>
</head>
<body>
<div id="myTable"></div>
</body>
</html>
Here's the JSON that populates my table.
{
"customers": [{
"id": 1,
"name": "Henry Watson",
"email": "henry#email.com"
},
{
"id": 2,
"name": "Lucy",
"email": "lucy#email.com"
},
{
"id": 3,
"name": "Mike Brow",
"email": "Mike#email.com"
},
{
"id": 4,
"name": "Mary Tempa",
"email": "mary#email.com"
},
{
"id": 5,
"name": "Beto Carlx",
"email": "beto#email.com"
}
]
}
Binding is for "live" data, so that means it will update the grid as you type. If you want to defer the changes until you hit a button, you can use methods on the form to do so:
Fiddle
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
Ext.onReady(function () {
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
},
listeners: {
itemclick: function (view, record) {
var f = Ext.create('Ext.form.Panel', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
buttons: [{
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
f.updateRecord(record);
f.close();
}
}, {
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
f.close();
}
}],
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'name',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}]
})
f.show();
f.loadRecord(record);
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: document.body
});
});
I am trying to load my data from the xmll to tagfield. But I am not sure what is getting failed. Can anybody please suggest me what is going wrong here.
I am using store for tagfield which is in different function. I don'y know even not able to do debugging also over there.
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store: this.TagStore,
//displayField: 'show',
valueField: 'id',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
debugger;
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'value',
mapping: "ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "TITLE",
type: 'string'
}],
proxy: new Ext.data.HttpProxy({
type: 'ajax',
actionMethods: {
read: "GET"
},
url: "localhost/MyApp/resources/data.xml",
headers: {
'Accept': 'application/json; charset=utf-8'
},
reader: {
type: 'xml',
rootProperty: 'R.D.Result'
},
extraParams: {
strIPXML: strIPXML
}
})
});
}
});
MyXml :
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>
Can anybody help me how to load data through xml in extJS
Just got sometime to play with your issue on sencha fiddle, Here is the basic working code (Atleast seeing tagfield store populated). Used: Ext JS 5.1.1.451 - Gray
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store:Ext.getStore('TagStore'),
displayField: 'name',
valueField: 'value',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId:'TagStore',
fields: [{
name: 'value',
mapping: "#ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "#TITLE",
type: 'string'
}],
proxy: {
type: 'ajax',
url: "data1.xml",
reader: {
type: 'xml',
record: 'E',
rootProperty:'EMAIL'
}
}
});
return combstore;
}
});
var form = Ext.create('MyApp.view.main.List');
form.TagStore();
var store = Ext.getStore('TagStore');
form.child('[xtype=tagfield]').bindStore(store);
}
});
data1.xml
<?xml version="1.0" encoding="UTF-8"?>
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>
I have a grid with a pagination. When I set a filter, the ajax request is successfully executed, the json return value looks fine and the filtered rows appear in my grid.
But the Loading... popup won't disappear and Firebug reports an error in ext-all-debug.js: TypeError: data is null (Line 134684). The code at that point is:
data = store.getData();
items = data.items; // error
I've checked my JS several times, but I can't find the problem.
Unfortunately I can't create a fiddle, since I use remote filtering. So here's the script:
Ext.onReady (function () {
Ext.define('FooModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'myId', type: 'int' },
{ name: 'myDate', type: 'date', dateFormat: 'Y-m-d H:i:s' },
{ name: 'myString', type: 'string' },
{ name: 'myFilename', type: 'string' },
{ name: 'myUser', type: 'string' }
]
});
Ext.define('FooStore', {
extend: 'Ext.data.Store',
model: 'FooModel',
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'ajax',
url: 'test.php',
reader: {
type: 'json',
rootProperty: 'import_files',
messageProperty: 'error',
}
},
remoteFilter: true,
remoteSort: true,
sorters: [{
property: 'myId',
direction: 'ASC'
}],
pageSize: 5
});
var theFooStore = new FooStore();
theFooStore.load({
callback: function(records, operation, success) {
if(!success) {
Ext.Msg.alert('Error', operation.getError());
}
}
});
Ext.define('FooGrid', {
extend: 'Ext.grid.Panel',
xtype: 'grid-filtering',
requires: [ 'Ext.grid.filters.Filters' ],
width: 1000,
height: 700,
renderTo: 'content',
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
store: theFooStore,
defaultListenerScope: true,
columns: [
{ dataIndex: 'myId', text: 'My Id', filter: 'number' },
{ xtype: 'datecolumn', dataIndex: 'myDate', text: 'My Date', renderer: Ext.util.Format.dateRenderer('d.m.Y'), filter: true },
{ dataIndex: 'myString', text: 'My String', filter: 'list' },
{ dataIndex: 'myFilename', text: 'My Filename',
renderer: function(value, meta, record) {
return Ext.String.format('{1}', record.data.myId, value);
},
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
{
dataIndex: 'myUser', text: 'My User',
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: theFooStore,
dock: 'bottom',
displayInfo: true
}]
});
new FooGrid();
});
And here's a sample json return value:
{
"success" : true,
"total" : 19,
"import_files" : [{
"myId" : "1",
"myFilename" : "foo bar.xlsx",
"myDate" : "2015-05-19 13:23:21",
"myUser" : "ABC",
"myString" : "Lorem ipsum"
},
...
]
}
Has someone experienced the same issue? What could it cause?
Just my luck. Found the answer shortly after posting the question.
Deleting the filter: 'list' option at my My String column is the solution.
I am using Ext JS 3.4 and having an issue getting files to upload from a form
The PHP script is failing to receive the file data (even trying just with a print_r($_FILES) which should show any file or error received).
this is my code
var editOrganisationForm = new Ext.FormPanel({
url: 'appsrv/users_json.php',
labelWidth: 75,
border:false,
width: 350,
items: {
xtype:'tabpanel',
layoutOnTabChange: true,
deferredRender:true,
border: false,
activeTab: 0,
defaults: {autoHeight:true, bodyStyle:'padding:10px; border: 0', bodyBorder: false},
items:[{
title:'Organisation Info',
layout: 'form',
fileUpload: true,
defaults: {width: 230},
defaultType: 'textfield',
items: [
{xtype: 'hidden', name: 'id'},
{fieldLabel: 'Organisation', name: 'organisation', allowBlank:false},
{
fieldLabel: 'Logo',
name: 'org_logo',
id: 'org_logo',
inputType: 'file',
allowBlank:true
},
{
fieldLabel: 'Theme',
name: 'org_theme',
id: 'org_theme',
store: [['val1', 'First Value'], ['val2', 'Second Value']],
xtype: 'combo',
allowBlank: false,
forceSelection: true,
valueField:'id',
displayField:'name'
}
]
}]
}
});
and
var winOrg = new Ext.Window({
title: 'Edit Organisation',
layout:'fit',
width:400,
height:215,
closeAction: 'hide',
plain: false,
modal: true,
shadow: true,
items: [editOrganisationForm],
buttons: [{
text:'Save',
handler: function() {
editOrganisationForm.getForm().submit({
method: 'POST',
waitTitle: 'Please Wait...',
waitMsg: 'Saving Changes',
url: 'appsrv/users_json.php',
params: {cmd: "addOrg"},
success: function() {
Ext.Msg.alert('Complete','Your changes have been saved');
tree.root.reload();
winOrg.hide();
},
failure: function(form, action) {
if (action.failureType == 'server') {
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Oops!', obj.errors.reason);
} else if (action.failureType == 'client') {
Ext.Msg.alert('Sorry', 'Please ensure all required fields have been completed');
} else {
Ext.Msg.alert('Sorry','An error occurred');
}
}
});
},
disabled: false
}]
});
That's me solved it
fileUpload: true was correct but I had it in the wrong object, it should have been in the form config object and not in the form>panel>items object
include isUpload: true in the form config object