ExtJS 4.2 Usage---tree and grid

Tidy up what you did in the previous period. It is mainly a combination of a tree menu and a grid panel. Select the node on the left Body menu, and the grid panel on the right displays the information under that node.

The first is to build Treestore

Ext.create (' Ext.data.TreeStore ', {autodestroy:true, Proxy: {type:' Ajax ', URL:'/admin/organizations/get_tree_node/',        //Nocache:false,//set to False does not pass the parameter to the background _dcreader: {type:' JSON ', Root:' Root '//root node parameter name}}, Nodeparam:' Nid ',//node parameter name, when the node is expanded to the server side nid:sorters: [//Sort by {property:' Nid ', Direction:' ASC '}], root: {ID:' 1 ', Text:GroupThe ///root node displays the name expanded:false//whether to expand by default}, StoreId:' Treestore '//ext.storemanager    });

Here is a place to be aware of, when tried for a long time: root under the ID: ' 1 ', because the Treejson default data transmission format is {' Text ': ' Group ', ' leaf ': ' false ', ' ID ': ' 1 '}, so here the parameters can only be fixed as ID , Text,leaf, etc., if you need to add a checkbox before the node, you need to include ' checked ': checked in the data being transferred.

Back-end data generation code

defGet_tree_node (Request):"""Organization Management Module organization Tree data source view"""nid= Request. Get.get ('nid',"') #取得参数nid的值 # data=[] Leaf=True checked=Falseif  notNid:node= Info.objects.get (nid=1)        ifNode.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) forNodeinchnodes:ifNode.has_child:leaf =False data.append ({'ID': Node.nid,'text': Node.name,'Leaf': Leaf#, ' checked ': Checked}) Json_data=json.dumps (data)returnHttpResponse (Json_data,'Application/json')

Generating an organization tree

varTree = ext.create (' Ext.tree.Panel ', {store:' Treestore ', Displayfield:' Text ',//Here for data transfer {'text': ' Group ', ' leaf ': ' false ', ' ID ': ' 1 '} usearrows:true,//expand Style, default to + MultiSelect:false,//Multi-choice Warcraft rootvisible:true,//whether the root node AutoScroll is displayed:true,//whether to automatically add the scrollbar listeners: {//To pass the Node ID as an additional parameter to scope: This, SelectionChange:function(model, sels) {if(Sels.length > 0) {                    varrs = sels[0], store= Ext.StoreManager.lookup (' Orgstore '); Store.proxy.extraParams.orgid=rs.data.id;                Store.load (); }}}, Height:540    });

The more important here is how to make the data transmission between the tree and grid components, method is very various, after searching the relevant suggestions on the Internet, choose this way to add additional parameters, reduce the repeated loading at the time of filtering.

The grid section is very simple to display.

varGrid = Ext.create (' Ext.grid.Panel ', {title:' Institutional information display ', border:false, Store:' Orgstore ', Loadmask:true,//features: [Filters],Columns:createcolumns (7), Selmodel:selmodel,//tick mode, checkbox used here//anchor: ' 100% ',width:968,//in order to display the scroll bar, the length width needs to be fixedheight:563, Emptytext:' No data found ', AutoScroll:true, AutoFill:true,//Forcefit:true,Dockeditems: [Ext.create (' Ext.toolbar.Paging '), {dock:' Bottom ', Store:' Orgstore ',//Here you need to specify the same store as the tableDisplayInfo:true}), {xtype:' Toolbar ', Dock:' Top ', items: ['-', UpdateButton, AddButton, DeleteButton, '-', '-', {xtype:' Searchfield ',//Search Boxwidth:200, Store:' Orgstore '                    }, ‘-‘                ]}        ]    });

The search box uses Ext.ux.form.SearchField here, but direct use may encounter

TypeError:me.store.proxy is undefined[interrupted at this error]      if (!me.store.proxy.hasownproperty (' Filterparam ')) {

The problem, because: the store specified in view: ' Phonebrand ', is actually just a string, and not a variable. In the example above, the store is a created variable.

So we need to change this.

Open \extjs\ux\form\searchfield.js, in about 22 lines, add the following code, patch it

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

At the same time, in the store code, also specify StoreID, such as StoreID: ' Phonebrand ', can refer to this blog post:

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

ExtJS 4.2 Usage---tree and grid