PDA

View Full Version : Populate Grid Panel On Combobox Select



eaglefox12
13 Nov 2012, 10:20 AM
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

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

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


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


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' } } });

vietits
13 Nov 2012, 4:50 PM
Looking at your code, I saw you do the filtering on combobox store, not grid store. Also, you do the filtering with a function that always return true with every record in store so infact, it will filter nothing.


items: [{
xtype: 'combo',
....
listeners: {
scope: this,
select: function (combo) {
combo.store.filterBy(function (record) { // <- do the filtering on combobox store, not grid store
return true; // <- nothing will be filtered out.
})
}
}
},

Try to fix your code as below:


...
select: function (combo) {
store.filter('States', combo.getValue()); // do the filtering on grid store
}
...

eaglefox12
14 Nov 2012, 5:54 AM
Thank you for your comment vietits... It worked like a charm... much appreciated... save me a lot of work :)