PDA

View Full Version : grid not showing data



arpho
27 Jul 2012, 4:21 AM
I am trying to populate Ext JS 4 Grid with json data. Unfortunatelly no matter what i do it's still remains empty. The JS function is below:




Ext.define('contactsModel',
{
extend:'Ext.data.Model',
fields:[
'noteid',
'address',
'city','zipcode',
'job_title','role',
'first_name',
'last_name',
'bloomberg',
'sector',
'industry',
'parent'
]
}
);//eof contactsModel


function()
{
//creo lo store peri contatti
var storeContacts=Ext.create('Ext.data.Store',
{
pageSize:25,
model:'contactsModel',
totalProperty:'total',
autoLoad:false,
root:'result',
listeners:
{
load : function(store)
{
console.log("loaded contacts");
console.debug(store);
// Ext.getCmp('numRow').setText("Companyes: "+store.getCount());
}
},
proxy:
{
idProperty: 'id',
type: 'direct',
directFn: QueryDatabase.getContacts,
totalProperty:'total',
root:'results',

}
}
);//eof storeContacts/
//carico lo store
storeContacts.load({id:record.data.id});
console.log("storecontacts");
console.debug(storeContacts);
//creo contactsGrid
var contactsGrid=Ext.create('Ext.grid.Panel',
{

store:storeContacts,
height: 1950,
//width: 1300,
columns:[
{
dataIndex:'id',
text:'Id',
hidden:true
},
{
dataIndex:'address',
flex:1,
text:'Address',
},
{
dataIndex:'city',
text:'City',
flex: 0.75
},
{
dataIndex:'zipcode',
text:'zipcode',
flex:'0.5'
},
{
dataIndex:'job_title',
text:'Job Title',
flex:'0.7'
},
{
dataIndex:'role',
text:'Role',
flex:'0.5'
},
{
dataIndex:'first_name',
text:'First Name',
flex:'0.8'
},
{
dataIndex:'last_name',
text:'Last Name',
flex:'0.8'
},
{
dataIndex:'bloomberg',
text:'Bloomberg',
flex: '1'
},
{
dataIndex:'sector',
text:'Sector',
flex:'0.7'


},
{
dataIndex:'industry',
text:'Industry',
flex:'1.5'

},
{
dataIndex:'parent',
text:'Parent',
flex:'2'
}


]

});//eof contactsGrid
console.log("contatti record.data");
console.debug(record.data);


company_title=record.data.name;
var tab=tabs.add(
//notesGrid,
{
title: "Contacts at "+record.data.name,
closable: true,
items:contactsGrid,
//html : 'A simple tab'+index,

});
tabs.setActiveTab(tab);
}
},




The server responce is a valid json that looks like:




{"type":"rpc","tid":1,"action":"QueryDatabase","method":"getResults","total":null,"result":[{"noteid":"183","address":"...","city":"...","type":"...","equities_client_type":"...","sector":"...","industry":"...","parent":"...","website":"...","status":"Active","group_sector":"...","alternative_name":"XXXX","id":"320","name":"XXX","updated_by":"....","country":"...","line":"OPEN","note":"...","DATE":"2010-12-16 09:27:39","update_date":"2010-12-16 09:27:39"},....





so it looks ok. However the grid view is not showing the anything. Anyone can see what i am doing wrong?

scottmartin
27 Jul 2012, 7:18 AM
This loads you existing json:

flex is numeric



Ext.define('contactsModel', {
extend: 'Ext.data.Model',
fields: ['id', 'noteid', 'address', 'city', 'zipcode', 'job_title', 'role', 'first_name', 'last_name', 'bloomberg', 'sector', 'industry', 'parent']
});

Ext.onReady(function() {

Ext.create('Ext.data.Store', {
storeId: 'gridStore',

model: 'contactsModel',

autoLoad: true,
proxy: {
idProperty: 'id',
totalProperty: 'total',
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'result'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Grid',

store: Ext.data.StoreManager.lookup('gridStore'),

columns: [
{
dataIndex: 'id',
header: 'Id'
//hidden: true // so we can see record exists
}, {
dataIndex: 'address',
flex: 1,
header: 'Address',
}, {
dataIndex: 'city',
header: 'City',
flex: 0.75
}, {
dataIndex: 'zipcode',
header: 'zipcode',
flex: 0.5
}, {
dataIndex: 'job_title',
header: 'Job Title',
flex: 0.7
}, {
dataIndex: 'role',
header: 'Role',
flex: 0.5
}, {
dataIndex: 'first_name',
header: 'First Name',
flex: 0.8
}, {
dataIndex: 'last_name',
header: 'Last Name',
flex: 0.8
}, {
dataIndex: 'bloomberg',
header: 'Bloomberg',
flex: 1
}, {
dataIndex: 'sector',
header: 'Sector',
flex: 0.7
}, {
dataIndex: 'industry',
header: 'Industry',
flex: 1.5

}, {
dataIndex: 'parent',
header: 'Parent',
flex: 2
}
],

height: 200,
width: 1000,
renderTo: Ext.getBody()
});

});


Scott.

arpho
28 Jul 2012, 1:25 AM
Thanks a lot, now it works

sai nishanth
24 Feb 2017, 7:49 AM
hereisthecode



var queueStore = Ext.create('Ext.data.JsonStore', {
storeId : thisObj.currentInbox.Name
+ 'queueStore',
pageSize : 20,
remoteSort : false,
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'data',
totalProperty : 'total'
}
},
sorters : [ sort],
model : thisObj.currentInbox.Name
+ 'QueueEntry',
listeners : {
beforeload : function(store, operation,
eOpts) {
//debugger;
thisObj.Helpers.inboxHelper.InboxStoreBeforeload(store, operation, fetchedData, myData);
}
}
});