Extjs4.x treegrid control check box

1 treegrid Introduction

Recently, we are studying the extjs4.x version. The official release package contains a treegrid plug-in. Let's take a look at the effect:

I want to Dynamically Retrieve and set the checkbox column on the left in the controller.

Here is an official example: http://www.ostools.net/uploads/apidocs/extjs4.1/examples/tree/treegrid.html

The specific JS: http://www.ostools.net/uploads/apidocs/extjs4.1/examples/tree/treegrid.js

The official example provides several columns: treecolumn, templatecolumn, actioncolumn, and checkcolumn.

The first three are not mentioned in this article. You can refer to the demo to understand it. This article mainly describes the dynamic acquisition and setting of checkcolumn.

Treepanel inherits from Ext. Tree. Panel, and store is the Ext. Data. treestore type. Let's take a look at some of my main classes.

Note: when reading this article, please first understand extjs and its mvc development mode. This is not the focus of this Article. If you are not clear, you can read the API or otherArticle.

2. Controller

 

Ext. define ('Manage. controller. authorize ', {extend: 'ext. app. controller ', requires: ['ext. UX. checkcolumn '], stores: ['category'], views: ['authorize. config '], models: ['category'], init: function () {This. control ({'authorizeconfig button [Action = selectall] ': {Click: This. selectall }}, selectall: function (button) {//CodeAll are put here, please note. }});
 

The controller needs to be analyzed together with model, store, and view. here you need to reference "Ext. UX. checkcolumn" and add the following code to app. JS:

 

Ext. loader. setpath ('ext. UX ','/extjs/4.1/examples/UX ');

3. Model

Take a look at the model class:

 

Ext. define ('Manage. model. CATEGORY ', {extend: 'ext. data. model ', fields: ['check', 'code', 'name', 'inc', 'parentcode', 'parentname', 'uploadcode', 'uploadname ', 'ispage', 'ismenu ', 'ismap', 'enablesresult', 'pageurl', 'menuurl', 'sort'], proxy: ext. create ('Manage. proxy. CATEGORY ')});
 

 

Note that the check field is mainly used to map the checkbox column in treegrid.

4. Store

 

 
Ext. define ('Manage. store. CATEGORY ', {extend: 'ext. data. treestore', model: 'Manage. model. CATEGORY ', foldersort: True, defaultrootid :''});
 

 

5. Proxy

 

Ext. define ('Manage. proxy. CATEGORY ', {extend: 'ext. data. proxy. ajax ', startparam: undefined, API: {read:'/manage/category/query. aspx ', update:'/manage/category/update. aspx ', create:'/manage/category/Add. aspx ', destroy:'/manage/category/Delete. aspx '}, Reader: {type: 'json', root: 'Children', idproperty: 'code', messageproperty: 'message', successproperty: 'success '}, Writer: {type: 'json', root :''}});
 

Here we only use read. The returned JSON is as follows:

 

 

{"ID": 0, "text": "root", "expanded": True, "leaf": false, "children": [{"code ": "11", "name": "Data Management", "English": NULL, "parentcode": NULL, "parentname": NULL, "uploadcode": NULL, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl ": null, "sort": 1, "iconcls": NULL, "leaf": false, "expanded": True, "children": [{"code": "1111 ", "name": "news management", "English": NULL, "parentcode": "11", "parentname": "Data Management", "uploadcode": NULL, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl ": null, "sort": 1, "iconcls": NULL, "leaf": True, "expanded": True, "children": []}, {"code": "12", "name": "System Management", "English": NULL, "parentcode": NULL, "parentname": NULL, "uploadcode ": null, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl": NULL, "sort": 2, "iconcls": NULL, "leaf": false, "expanded": True, "children": [{"code ": "1211", "name": "document template", "English": NULL, "parentcode": "12", "parentname": "System Management", "uploadcode ": null, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl": "templist", "sort": 1, "iconcls": NULL, "leaf": True, "expanded": True, "children ": []}] },{ "code": "13", "name": "System Configuration", "English": NULL, "parentcode": NULL, "parentname ": null, "uploadcode": NULL, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl": NULL, "sort": 3, "iconcls": NULL, "leaf": false, "expanded": True, "children ": [{"code": "1311", "name": "role management", "English": NULL, "parentcode": "13", "parentname ": "System Configuration", "uploadcode": NULL, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult ": 0, "pageurl": NULL, "menuurl": "rolelist", "sort": 1, "iconcls": NULL, "leaf": True, "expanded": True, "children": [] },{ "code": "1312", "name": "administrator management", "English": NULL, "parentcode": "13 ", "parentname": "System Configuration", "uploadcode": NULL, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl": "adminlist", "sort": 2, "iconcls": NULL, "leaf": True, "expanded": True, "children": []}, {"code": "1313", "name": "permission assignment", "English": NULL, "parentcode": "13", "parentname": "System Configuration", "uploadcode": NULL, "uploadname": NULL, "ispage": 0, "ismenu ": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl": "authorizeconfig", "sort": 3, "iconcls": NULL, "leaf": True, "expanded": True, "children": [] },{ "code": "1314", "name": "Classification Management ", "English": NULL, "parentcode": "13", "parentname": "System Configuration", "uploadcode": NULL, "uploadname": NULL, "ispage ": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl": "categorylist", "sort": 4, "iconcls": NULL, "leaf": True, "expanded": True, "children": [] },{ "code": "1315", "name ": "Article Management", "English": NULL, "parentcode": "13", "parentname": "System Configuration", "uploadcode": NULL, "uploadname": NULL, "ispage": 0, "ismenu": 1, "ismap": 0, "enableconsult": 0, "pageurl": NULL, "menuurl": NULL, "sort ": 5, "iconcls": NULL, "leaf": True, "expanded": True, "children": []}

 

 

6. View

 

Finally, let's look at the view:

 

Ext. define ('Manage. view. authorize. config ', {extend: 'ext. panel. panel ', alias: 'widget. authorizeconfig ', Title: 'permission configuration', resizable: false, layout: {type: 'hbox', align: 'stretch'}, autoshow: True, iconcls: 'groupkey ', modal: True, buttonalign: 'center', initcomponent: function () {This. items = [{xtype: 'grid', flex: 1, title: 'Role list', titlealign: 'center', border: false, selmodel: ext. create ('ext. selection. rowmodel ', {injectcheckbox: 1}), store: 'role', dockeditems: [{xtype: 'pagingtoolbar', store: 'role', dock: 'bottom', displayinfo: true}], columns: [{xtype: 'rownumberer', width: 40, align: 'center', sortable: false}, {header: 'Role number', dataindex: 'code', align: 'center', flex: 1}, {header: 'Role name', dataindex: 'name', align: 'center', flex: 1 }, {header: 'Role status', dataindex: 'state', align: 'center', Renderer: Manage. utility. format. lockstate, flex: 1}]}, {width: 1}, {xtype: 'treepanel ', flex: 1, title: 'permission list', titlealign: 'center ', border: false, usearrows: True, rootvisible: false, multiselect: True, singleexpand: false, store: 'category ', bbar: [{type: 'link', iconcls: 'bullettick', Action: 'selectall', text: 'select'}], columns: [{xtype: 'checkcolumn', dataindex: 'check', width: 40, stopselection: false },{ text: 'number', width: 80, sortable: True, dataindex: 'code'}, {xtype: 'treecolumn', text: 'name', width: 100, sortable: True, dataindex: 'name'}, {text: 'upload configuration', width: 100, sortable: True, dataindex: 'uploadname'}, {text: 'management path', width: 100, flex: 1, sortable: True, dataindex: 'menuurl'}]; this. buttons = [{text: 'save', Action: 'submit '}, {text: 'reset', Action: 'reset'}]; this. callparent (arguments );}});

 

 

7. Get and set the checkbox

 

Put the following code in the Controller (as noted above ):

 

VaR grid = button. up ('treepanel '); // obtain the Grid Object var store = grid. getstore (); // obtain the store object through the grid. The console cannot be performed after testing. log (store. getcount (); // The total number of rows cannot be obtained here. var table = grid. getview (); // get the table object // method 1 var elems = table. getnodes (); // obtain all htmlelement objects for (VAR I = 0; I <elems. length; I ++) {// traverse all htmlelement objects var record = table. getrecord (elems [I]); // convert to record (model) object var check = record. get ('check'); // get checkbox if (check) {// determine whether or not Select console. Log (record. Get ('code');} record. Set ('check ',! Check); // set the copy box} // method 2 var tablestore = table. getstore (); // get the store object from table (VAR I = 0; I <tablestore. getcount (); I ++) {var record = tablestore. getat (I); // obtain the I-th record var check = record. get ('check'); If (check) {console. log (record. get ('code');} record. set ('check ',! Check );}