两个EXT JS网格面板之间的绑定

我刚刚开始使用一周前的Ext js，并且我想就如何在两个网格面板之间建立关系寻求帮助，我有第一个面板显示类别和第二个子类别，所以我想：当我点击一个类别时，它会在第二个网格面板中显示它的子类别，并显示一条消息“如果没有选择任何一个，请选择一个类别，现在我只是显示在第二面板中的所有子类别，我在这里的代码：两个EXT JS网格面板之间的绑定

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, 

});

来源

2015-04-27 xman

请澄清你的问题。你的代码中哪部分不起作用？还有哪个版本的ExtJS与你一起工作？ –

我使用extjs 4.2.3，代码有效，但它显示第二个面板中的所有子类别，我想添加一个功能，因此当点击某个类别时，它会在第二个网格面板中显示此类别的子类别。 – xman

必须监听器添加到您的类别电网：

listeners: { 
    itemclick: function (this, record, item, index, e, eOpts) { 
     // Select your catergory, find subcategories and load subcategories in your subcategories grid 
    } 
}

来源

2015-04-27 11:36:47

两个EXT JS网格面板之间的绑定

回答

相关问题