PDA

View Full Version : Binding between two EXT JS grid panels



xman13
4 May 2015, 2:38 AM
I'm just started working with Ext js a week ago, and I would like to ask for help on how to make a relationship between two grid panel, I have the first panel to display categories and the second for sub-categories, so I want to : when I click on a category, it displays its subcategories in the second grid panel, and a message "please select a category if none is selected, for now I'm just displaying all subcategories in the second panel, here my code :


Ext.onReady(function() {




Ext.define('categorie', {
extend: 'Ext.data.Model',
fields: [
{name: 'id_categorie', type: 'string'},
{name: 'lib_categorie', type: 'string'},
],
idProperty: 'id_categorie'


});


Ext.define('sub-categorie', {
extend: 'Ext.data.Model',
fields: [
{name: 'id_sub-categorie', type: 'string'},
{name: 'lib_sub-categorie', type: 'string'},
{name: 'id_categorie', type: 'string' },
],


associations: [
{ type: 'belongsTo', model: 'categorie', primaryKey: 'id_sub-categorie', foreignKey: 'id_categorie' }
],
});


var categorieStore = Ext.create('Ext.data.Store', {
model: 'categorie',
pageSize : 15,
proxy: {
type: 'ajax',
url: 'ajax.php?mode=getCategories',
reader: {
type: 'json',
root: 'categories'
}
},
timeout : 90000,
extraParams : {
start : 0,
limit : 20
},
sorters: [ {
property : 'lib_categorie',
direction : 'ASC'
} ],
remoteSort : true,
autoDestroy : true,
simpleSortMode : true,
autoLoad: true
});


var subCategoriesStore = Ext.create('Ext.data.Store', {
model: 'sub-categorie',
pageSize : 15,
proxy: {
type: 'ajax',
url: 'ajax.php?mode=getSubCategories',
reader: {
type: 'json',
root: 'sub-categories'
}
},
timeout : 90000, // 90 secondes
extraParams : {
start : 0,
limit : 20
},
sorters: [ {
property : 'lib_sub-categorie',
direction : 'ASC'
} ],
remoteSort : true,
autoDestroy : true,
simpleSortMode : true,
autoLoad: true
});


var CategoriePanel = Ext.create('Ext.grid.Panel',{


title: 'Categories',
renderTo: 'categories_grid',


store: categorieStore,
columns: [
{
header : I18N.msgID,
tooltip : I18N.msgID,
align : 'left',
text: 'ID',
flex: 50,
dataIndex: 'id_categorie'
},
{
header : I18N.msgLib,
tooltip : I18N.msgLib,
align : 'left',
text: 'Lib',
flex: 50,
dataIndex: 'lib_categorie'
},
],


width: 400,


});


var subCategoriePanel = Ext.create('Ext.grid.Panel',{


title: 'subCategories',
renderTo: 'subcategories_grid',


store: subCategoriesStore,
columns: [
{
header : I18N.msgIDs,
tooltip : I18N.msgIDs,
align : 'left',
text: 'IDs',
flex: 50,
dataIndex: 'id_sub-categorie'
},
{
header : I18N.msgLibs,
tooltip : I18N.msgLibs,
align : 'left',
text: 'Libs',
flex: 50,
dataIndex: 'lib_sub-categorie'
},
],


width: 400,


});

joel.watson
4 May 2015, 2:13 PM
Hi--

A pretty easy way to do this would be to add a "select" event listener to your master grid:



...
listeners: {
select: function(view, record, index, opts) {
// ... get subcategory store
...
subCategoriesStore.filter([{
property: 'id_categorie ',
value: record.get('id_categorie')
}])
...
}
}
...


Within that handler, you could get a reference to the subcategories store and then apply a filter. If you set remoteFilter: true on your store, it will make an Ajax request, passing along the filter. You can then have your server query and return the subcategories that belong to the selected category id passed in the filter. The filtering of the store will automatically update the grid once the limited result set is returned.

This should also prevent you from having to autoLoad the subcategory store--one less call!

Docs Links:

Filter: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-filter
Select Event: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel-event-select

I hope that helps!
Thanks
Joel