Extjs 4.2使用心得 --- tree和grid

把前段时间做的东西整理一下。主要是树形菜单和grid面板的结合。选中左边机构菜单的节点，右边grid面板显示该节点下的信息。

首先是建立treestore

Ext.create('Ext.data.TreeStore', {
        autoDestroy: true,
        proxy: {
            type: 'ajax',
            url: '/admin/organizations/get_tree_node/',        
//            noCache: false,  //设置为false 则不会向后台传参 _dc
            reader: {
                type: 'json',
                root: 'root'     //根节点参数名
            }
        },
        nodeParam: 'nid',   //节点参数名，当节点展开时向服务端传送nid:
        sorters: [　　　　　　//排序方式
            {
                property: 'nid',
                direction: 'ASC'
            }
        ],
        root: {
            id: '1',
            text: '集团',   //根节点显示的名称
            expanded: false     //是否默认展开
        },
        storeId: 'treeStore'   //Ext.StoreManager
    });

这里有个需要注意的地方，当时试了好久：root下面id:'1'，因为treejson的默认数据传输的格式为{'text':'集团','leaf':'false','id':'1'}这样的，所以这里的参数只能只能固定为id,text,leaf等等，如果需要在节点前加上checkbox，则需要在传输的数据中加入'checked':checked。

后端数据生成代码

def get_tree_node(request):
    """
    机构管理模块机构树数据源视图
    """
    nid = request.GET.get('nid', '')   #取得参数nid的值#
    data = []
    leaf = True
    checked = False
    if not nid:
        node = Info.objects.get(nid=1)
        if node.has_child: leaf = False  #判断该节点是否为叶子节点#
        data.append({'root': 'True',
                     'id': node.nid,
                     'name': node.name,
                     'leaf': leaf
                     # ,'checked':checked
        })
    else:
        parent_node = Info.objects.get(nid=int(nid))
        nodes = Info.objects.filter(pcode=parent_node.code)
        for node in nodes:
            if node.has_child: leaf = False
            data.append({
                'id': node.nid,
                'text': node.name,
                'leaf': leaf
                # ,'checked':checked
            })
    json_data = json.dumps(data)
    return HttpResponse(json_data, 'application/json')

生成机构树

var tree = Ext.create('Ext.tree.Panel', {
        store: 'treeStore',   
        displayField: 'text',     //此处为传输数据的{'text':'集团','leaf':'false','id':'1'}
        useArrows: true,　　　　　　//展开样式，默认为+
        multiSelect: false,　　　　//多选魔兽
        rootVisible: true,　　　　//是否显示根节点
        autoScroll: true,　　　　　　//是否自动添加滚动条
        listeners: {       //将节点id作为额外参数传递到
            scope: this,
            selectionchange: function (model, sels) {
                if (sels.length > 0) {
                    var rs = sels[0],
                        store = Ext.StoreManager.lookup('orgStore');
                    store.proxy.extraParams.orgid = rs.data.id;
                    store.load();
                }
            }
        },
        height: 540
    });

这里比较重点的是怎么使tree和grid组件间的数据传输，方法挺多种，在网上查了相关建议后，选择这种添加额外参数的方式,减少在过滤时的重复加载。

grid部分的展示就很简单了

var grid = Ext.create('Ext.grid.Panel', {
        title: '机构信息展示',
        border: false,
        store: 'orgStore',
        loadMask: true,
//        features: [filters],
        columns: createColumns(7),
        selModel: selModel,    //勾选模式，这里用的checkbox
//        anchor: '100%',
        width: 968,            //为了显示滚动条，长宽需要固定
        height: 563,
        emptyText: '没有找到数据',
        autoScroll: true,
        autoFill: true,
//        forceFit: true,
        dockedItems: [Ext.create('Ext.toolbar.Paging', {
            dock: 'bottom',
            store: 'orgStore', //这里需要指定与表格相同的store
            displayInfo: true
        })
            , {xtype: 'toolbar',
                dock: 'top',
                items: [
                    '-', updateButton, addButton, deleteButton, '-', '->', {
                        xtype: 'searchfield',   //搜索框
                        width: 200,
                        store: 'orgStore'
                    }, '-'
                ]}
        ]
    });

搜索框这里使用了Ext.ux.form.SearchField，但是直接使用可能会遇到

TypeError: me.store.proxy is undefined
[在此错误处中断]     

if (!me.store.proxy.hasOwnProperty('filterParam')) {

这个问题，原因是：在VIEW中指定的store:    'PhoneBrand'，其实只是一个字符串，并没不是变量。而上面的例子中，store是一个创建了的变量。

所以需要这样改

打开\extjs\ux\form\SearchField.js，在大概22行处，增加以下代码，patch一下吧

        if(typeof(me.store.isStore) == 'undefined')
        {
            me.store = Ext.data.StoreManager.get(me.store);
        }

 同时，在store的代码中，也要指定storeId，如storeId:'PhoneBrand', 具体可以参考这篇博文：

http://www.cnblogs.com/howgoo/archive/2013/01/26/EXTJS_earchfield_me_store_proxy_is_undefined.html