首页 > 代码库 > Extjs 4.2使用心得 --- tree和grid
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
Extjs 4.2使用心得 --- tree和grid
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。