Finally i stock with extJs.
What i do here is create FormPanel with some fields, which i populate on success ajax request.
It works fine except i want also put some data in LocalGrid, on success, it where i stock.
I load some default data in grid panel, just for check, what i want is totally renew all data with new store data.
Orders.panel.Info = function(config) {
config = config || {};
Ext.apply(config,{
border: false
,baseCls: 'modx-formpanel'
,items: [{
html: '<h2>'+_('orders.management')+'</h2>'
,border: false
,cls: 'modx-page-header'
},{
xtype: 'modx-tabs'
,bodyStyle: 'padding: 10px'
,defaults: { border: false ,autoHeight: true }
,border: true
,items: [{
title: 'Order Description number ' + MODx.request.id
,defaults: { autoHeight: true }
,items: [{
html: '<p>'+'In this page you can see full info about your order.'+'</p>
'
,border: false
},{
xtype: 'compositefield'
// ,labelWidth: 400
,items: [{
xtype: 'displayfield'
,value: 'Name'
,width: 330
},{
xtype: 'displayfield'
,value: 'Lastname'
// ,width: 120
}]
},{
xtype: 'compositefield'
,items: [{
name: 'lblFirstName'
,xtype: 'textfield'
,value: ''
},{
name: 'lblLastName'
,xtype: 'textfield'
,value: ''
}]
},{
xtype: 'compositefield'
// ,labelWidth: 400
,items: [{
xtype: 'displayfield'
,value: 'Middle Name'
,width: 330
},{
xtype: 'displayfield'
,value: 'Age'
// ,width: 120
}]
},{
xtype: 'compositefield'
,items: [{
name: 'lblMiddleName'
,xtype: 'textfield'
,value: ''
},{
name: 'lblAge'
,xtype: 'textfield'
,value: ''
}]
},{
xtype: 'compositefield'
// ,labelWidth: 400
,items: [{
xtype: 'displayfield'
,value: 'Phone'
,width: 330
},{
xtype: 'displayfield'
,value: 'E-mail'
// ,width: 120
}]
},{
xtype: 'compositefield'
,items: [{
name: 'lblPhone'
,xtype: 'textfield'
,value: ''
},{
name: 'lblEmail'
,xtype: 'textfield'
,value: ''
}]
},{
xtype: 'compositefield'
// ,labelWidth: 400
,items: [{
xtype: 'displayfield'
,value: 'Marriage Date'
,width: 330
},{
xtype: 'displayfield'
,value: 'Marriage Place'
// ,width: 120
}]
},{
xtype: 'compositefield'
,items: [{
name: 'lblPartyDate'
,xtype: 'textfield'
,value: ''
},{
name: 'lblMesto'
,xtype: 'textfield'
,value: ''
}]
},{
xtype: 'compositefield'
// ,labelWidth: 400
,items: [{
xtype: 'displayfield'
,value: 'Guest'
,width: 330
},{
xtype: 'displayfield'
,value: 'Manager'
// ,width: 120
}]
},{
xtype: 'compositefield'
,items: [{
name: 'lblGuests'
,xtype: 'textfield'
,value: ''
},{
name: 'lblManger'
,xtype: 'textfield'
,value: ''
}]
},{
xtype: 'orders-grid-units'
,preventRender: true
}]
}]
}]
,listeners: {
render: function(p) {
Ext.Ajax.request({
url: Orders.config.connectorUrl ,
success: function(t){
var jsonData = Ext.util.JSON.decode(t.responseText);
var descr = jsonData.results[0].descr;
descr = descr.split(',');
var kolvo = jsonData.results[0].kolvo;
kolvo = kolvo.split(',');
var price = jsonData.results[0].price;
price = price.split(',');
var myData = new Array();
for (var i=0; i < descr.length; i++) {
myData[i] = descr[i] + ',' + price[i] +',' + kolvo[i];
};
console.log(myData);
p.getForm().setValues({ 'lblFirstName': jsonData.results[0].name, 'lblLastName': jsonData.results[0].lastname, 'lblMiddleName': jsonData.results[0].middlename, 'lblAge': jsonData.results[0].age, 'lblPhone': jsonData.results[0].phone, 'lblEmail': jsonData.results[0].email, 'lblPartyDate': jsonData.results[0].partydate, 'lblMesto': jsonData.results[0].mesto, 'lblGuests': jsonData.results[0].guests, 'lblManger': jsonData.results[0].manger});
var store = new Ext.data.ArrayStore({
id: 10
,fields: [
{name: 'company'},
{name: 'price'},
{name: 'change'}
]
});
store.loadData(myData);
console.log(store);
// if(Ext.getCmp('orders-grid-units') != null) Ext.get('orders-grid-units'); I want renew LocalGrid with store
}
,params: { action: 'mgr/order/getinfo', query: MODx.request.id }
});
}
}
});
Orders.panel.Info.superclass.constructor.call(this,config);
};
Ext.extend(Orders.panel.Info,MODx.FormPanel);
Ext.reg('orders-panel-info',Orders.panel.Info);
Orders.grid.Units = function(config) {
var myData = [
['3m Co', 71.72, 0.02],
['Alcoa Inc', 29.01, 0.42],
['United Technologies Corporation', 63.26, 0.55],
['Verizon Communications', 35.57, 0.39],
['Wal-Mart Stores, Inc.', 45.45, 0.73]
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
]
});
// manually load local data
store.loadData(myData);
config = config || {};
Ext.applyIf(config,{
id: 'orders-grid-units'
,store: store
// ,url: Orders.config.connectorUrl
// ,baseParams: { action: 'mgr/order/getList' }
,fields: ['id','lastname','name', 'age']
,paging: true
// ,autosave: true
// ,remoteSort: true
,anchor: '97%'
,autoExpandColumn: 'name'
,columns: [{
header: 'Company'
,dataIndex: 'company'
,sortable: true
,width: 80
,editor: {xtype:'textfield'}
},{
header: 'Price'
,dataIndex: 'price'
,sortable: true
,width: 80
,editor: { xtype: 'textfield' }
},{
header: 'Change'
,dataIndex: 'change'
,sortable: true
,width: 40
,editor: { xtype: 'textfield' }
}]
/* ,tbar: [{
xtype: 'textfield'
,id: 'orders-search-filter'
,emptyText: 'Serch...'
,listeners: {
'change': {fn:this.search,scope:this}
,'render': {fn: function(cmp) {
new Ext.KeyMap(cmp.getEl(), {
key: Ext.EventObject.ENTER
,fn: function() {
this.fireEvent('change', this);
this.blur();
return true;
}
,scope: cmp
});
},scope: this}
}
}] */
});
Orders.grid.Units.superclass.constructor.call(this,config);
};
Ext.extend(Orders.grid.Units,MODx.grid.LocalGrid);
Ext.reg('orders-grid-units',Orders.grid.Units);
