Question

我刚刚开始使用Ext js一周前，我想请求如何在两个网格面板之间建立关系的帮助，我有第一个面板显示类别，第二个面板显示-categories，所以我想：当我点击一个类别时，它会在第二个网格面板中显示其子类别，并显示一条消息＆＃34;如果没有选择，请选择一个类别，现在我只是显示第二个面板中的所有子类别，这里是我的代码：

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,

});

Answer 1

您必须为类别网格添加一个监听器：

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

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

1 个答案: