I am trying to fill my grid depending on values selected on combobox on ext 4.1. But I can't get it to work. My combobox has list of States. and depending of which state user chooses, the grid displays more information of that state, like full name, capital, population. This is the store for my grid
Code:
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
id: 'OurData',
pageSize: 20,
pageNumber: 1,
remoteSort: true,
fields: [
{ name: 'States' },
{ name: 'FullName' },
{ name: 'Capital' },
{ name: 'Population' }
],
proxy: {
type: 'ajax',
url: 'GetState/getS',
reader: {
type: 'json',
root: 'myTable',
idProperty: 'States',
totalProperty: '@count'
}
}
});
store.loadPage(1);
this is my grid
Code:
var grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
border: 0,
store: store,
columnLines: true,
//loadMask: true,
flex: 1,
layout: {
align: 'stretch',
align: 'center',
type: 'hbox'
},
//renderTo: Ext.getBody(),
columns: [
{ header: 'States',
sortable: true, dataIndex: 'States', flex: 0.3
},
{ header: 'Full Name',
sortable: true, dataIndex: 'FullName', flex: 0.7
},
{ header: 'Capital',
sortable: true, dataIndex: 'Capital', flex: 0.3
},
{ header: 'Population', flex: 1,
sortable: true, dataIndex: 'Population'
}
],
renderTo: Ext.getBody(),
viewConfig: {
stripeRows: true
},
bbar: Ext.create('Ext.PagingToolbar', {
style: 'border:0',
store: store,
displayInfo: true,
preprendButtons: true,
displayMsg: 'Displaying Data {0} - {1} of {2}',
emptyMsg: "No Data to display"
})
});
and this is my combobox
Code:
items: [{ xtype: 'combo', id: 'iccombo', scope: this, store: combostore, mode: 'remote', minChars: 0, fieldLabel: 'Short State', displayField: 'States', valueField: 'States', typeAhead: true, name: 'States', labelWidth: 125, anchor: '95%',
listeners: {
scope: this,
select: function (combo) {
combo.store.filterBy(function (record) {
return true;
})
}
} },
and the store for combobox
Code:
var combostore = Ext.create('Ext.data.Store', { autoLoad: true, id: 'OurData', scope: this, fields: [{ name: 'States' }], proxy: { type: 'ajax', url: 'GetState/getS', reader: { type: 'json', root: 'myTable' idProperty: 'States' } } });