Extjs

Ext.define('CategoryTree', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'id', type:'long' },
                  ]
    });

var treeStore = Ext.create('Ext.data.TreeStore', {
        autoLoad: false,
        model: 'CategoryTree',//对应上面model
        proxy: {
            type: 'ajax',
            url: '/ProductMgr/getFrontCategoryTreeData',
            reader: {
                type: 'json',
            }
        },
        rootVisible: false
    });


var treePanel = Ext.create('Ext.tree.Panel', {
         region: 'west',//可以直接展示
         bodyStyle: 'background-color: #F6F6F6;',
         store: treeStore,//对应上面store
         displayField: 'nodeName',
         width: '20%',
         selModel: {
             mode: 'SINGLE'
         },
         key:'',
         rootVisible: false,
         shadow: false,
         manageHeight: false,
      
         listeners: {
             itemclick:function(v, e) {
                 id = e.data.id;
                 value = e.data.nodeName;
                 Ext.getCmp("treeValue").setValue(value);  
                 treePanel.key = id;
                 backStore.loadPage(1);//加载下面的backStore
                 childStore.loadPage(1);//未写
             }
         },
         viewConfig: {
             
         }
     });

var backStore = Ext.create('Ext.data.Store',{
        model: 'CategoryTree',
        proxy:
        {
              type: 'ajax',
              url: '/CategoryMgr/systemCategoryByCategoryId',// 向该URL发送Ajax请求
              reader: { // 使用Ext.data.reader.Json读取服务器数据
                   type: 'json',
                   root: 'rows' // 直接读取服务器响应的data数据
              },
        },
        autoLoad:true// 自动加载服务器数据
    });
    
backStore.on('beforeload',function(store,option){
        var cid = treePanel.key;
        var newParams = {categoryId:cid};
        Ext.apply(backStore.proxy.extraParams,newParams);
    });

var backCategoryGrid = Ext.create('Ext.grid.Panel', {//提供表格一样的展示//也是可以展示的
        xtype: "grid",
       store: backStore,//对应上面的store
       columns: [
           { text: '类目ID',  dataIndex: 'categoryId' },
           { text: '关联的后台类目', dataIndex: 'categoryName', flex: 1  }
       ],
       height: 200,
       width: '100%',
       renderTo: Ext.getBody()
    });

var middlePanel = Ext.create('Ext.panel.Panel', {//用做展示(把上面的grid嵌套进去这个plan)
        title: '绑定的后台类目',
        bodyStyle: 'background-color: #F6F6F6;',
        border: 0,
        height    : 200,
        items:[
            backCategoryGrid//对应上面grid
        ]
    });

var greyPanel = Ext.create('Ext.panel.Panel', {
        region: 'east',
        bodyStyle: 'background-color: #F6F6F6;',
        width: '80%',
        border: 0,
        defaults: {
            split: true,
            autoScroll: true,
            height: 30
        },
        items:[
            topPanel,//未写
            secondPanel,//未写
            middlePanel,
            bottomPanel//未写
        ]
    });

Ext.create('Ext.Viewport', {//最终展示
        border: 0,
        layout: {
            type: 'border'
        },
        defaults: {
            split: true
        },
        items:[
            treePanel,
            greyPanel
        ]
    });