PDA

View Full Version : Help Me Ajax Bind dynamic Data Grid Desktop



hieugiang26
17 Apr 2012, 10:07 PM
thank
this is code


Ext.define('MyDesktop.GridWindow', { extend: 'Ext.ux.desktop.Module',
requires: [
// 'Ext.data.ArrayStore',
'Ext.data.Store',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
id: 'grid-win',
init: function () {
this.launcher = {
text: 'Grid Window',
iconCls: 'icon-grid',
handler: this.createWindow,
scope: this
};
},
createWindow: function () {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if (!win) {
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: ['company', 'price', 'change', 'pctChange']
});
var store = new Ext.data.Store({
//Ext.create('Ext.data.ArrayStore', {
model: 'Company',
proxy: {
type: 'ajax',
url: 'a.json',
reader: {
type: 'json',
root: 'companies'
}
}
// // data: MyDesktop.GridWindow.getDummyData()
});
win = desktop.createWindow({
id: 'grid-win',
title: 'Grid Window',
width: 740,
height: 480,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
layout: 'fit',
autoScroll: true,
items: [
{
store: store,
border: false,
xtype: 'grid',
id: 'grid',
listeners: {
//singleSelect: true, //(1)
itemclick: function () {
var store = this.down('gridpanel');
store.load();
},
scope: this
},
viewConfig: {
listeners: {
itemdblclick: function (grid, record, item, index, e) {
alert(record.get('company'));
}
}
},
columns: [
{
text : 'Company Name',
dataIndex: 'name'
},
{
text : 'Founded',
width : 200,
dataIndex: 'founded'
},
{
text : 'Key People',
width : 250,
dataIndex: 'people'
}
],

}

],
tbar: [{
text: 'Add Something',
tooltip: 'Add a new row',
iconCls: 'add',
handler: function () {
if (!Ext.getCmp('myWin')) {
var newWin = new Ext.Window({
id: 'myWin',
title: 'hello,my friend',
width: 340,
height: 280,
html: '<p>Something useful would be in here.</p>',
iconCls: 'bogus',
shim: false,
animCollapse: false,
modal: true,
constrainHeader: true
});
}
newWin.show();
}
}, '-', {
text: 'Options',
tooltip: 'Blah blah blah blaht',
iconCls: 'option'
}, '-', {
text: 'Remove Something',
tooltip: 'Remove the selected item',
iconCls: 'remove',
listeners: {
click: function () {
var grid = Ext.getCmp('grid');
var r = grid.getSelectionModel().getSelection();
var s = grid.getStore();
alert(Ext.getCmp('grid').store.getAt(s.indexOf(r[0])).data["pctChange"]);
}
}


}]
});
//store.render();
Ext.getCmp('grid').store.load();
}
// win.down('gridpanel').on('itemclick', function () {
// alert("callme");
// }, this);
win.show();
return win;
}
});

this is file a.Json in


{'companies': [{ 'company': '1',
'price': 'Google',
'change': 'September 4, 1998',
'pctChange': 'Sergey Brin, Larry Page'
}, {
'company': '2',
'price': 'Microsoft',
'change': 'April 4, 1975',
'pctChange': 'Bill Gates, Paul Allen'
}, {
'company': '3',
'price': 'Yahoo',
'change': 'March 1, 1995',
'pctChange': 'Jerry Yang, David Filo'
}, {
'company': '4',
'price': 'Apple',
'change': 'April 1, 1976',
'pctChange': 'Steve Jobs ,Steve Wozniak, Ronald Wayne'
}, {
'company': '5',
'price': 'Amazon.com',
'change': '1994',
'pctChange': 'Jeffrey P. Bezos'
}, {
'company': '6',
'price': 'Ebay',
'founded': 'September 3, 1995',
'pctChange': 'Pierre Omidyar'
}
]}

run no display value on grid
34152

but when click on row will show data
34153


please help me , show value on grid desktop

thank very much all friends

mitchellsimoens
18 Apr 2012, 6:49 AM
The dataIndex config of your columns need to match the fields in your model.

mitchellsimoens
18 Apr 2012, 6:50 AM
Moved to Ext JS 4 Q&A forum also