Extjs grid and tree and several common plug-ins

Ext. onReady (function () {/*** 1. grid * // * Ext. create ('ext. grid. panel ', {store: Ext. create ('ext. data. arraystore', {fields: [{name: 'book'}, {name: 'author'}], data: [['extjs4: firstbook ', 'jobs']}), columns: [{text: 'book', flex: 1, sortable: false, dataIndex: 'book'}, {text: 'author ', width: 100, sortable: true, dataIndex: 'author'}], height: 80, width: 300, title: 'simple grid', renderTo: 'tes TG1 '}); // grid2Ext. define ('book', {extend: 'ext. data. model ', fields: [{name: 'book'}, {name: 'topic', type: 'string'}, {name: 'released', type: 'boolean'}, {name: 'releaseddate', type: 'date'}, {name: 'value', type: 'number'}]}); var store = Ext. create ('ext. data. arraystore', {model: 'book', data: ['ext JS 4: First Look', 'ext js', '4', false, null, 0], ['learning Ext JS 3.2 ', 'ext js', '3. 2 ', true, '2014/1/01', 2010/10], ['ext JS 40.49 cookbook', 'ext js', '3', true, '2014/1/01 ', 44.99], ['learning Ext js', 'ext js', '2. x', true, '2014/1/01 ', 2008/11]}); Ext. create ('ext. grid. panel ', {store: store, width: 550, height: 300, title: 'extjs Books', renderTo: 'grid2 ', features: [{groupHeaderTp1: 'her her: {name} '}], selModel: Ext. create ('ext. selection. checkboxModel '), columns: [Ext. create (' Ext. grid. rowNumberer '), {text: 'book', flex: 1, dataIndex: 'book'}, {text: 'category', xtype: 'templatecolumn ', width: 100, tpl: '{topic} {version}'}, {text: 'already released', xtype: 'booleancolumn', width: 100, dataIndex: 'released', trueText: 'Yes', falseText: 'no'}, {text: 'released date', xtype: 'datecolumn', width: 100, dataIndex: 'releaseddate', format: 'M-y'}, {text: 'price', xtype :' Numbercolumn ', width: 80, dataIndex: 'value', renderer: Ext. util. format. usMoney}, {xtype: 'actioncolumn', width: 50, items: [{icon: 'script/checked.gif ', tooltip: 'edit', handler: function (grid, rowIndex, colIndex) {var rec = grid. getStore (). getAt (rowIndex); Ext. messageBox. alert ('edit', rec. get ('book') ;},{ icon: 'script/scroll-left.gif ', tooltip: 'delete', handler: function (grid, rowIndex, col Index) {var recs = grid. getStore (). getAt (rowIndex); Ext. messageBox. alert ('delete', recs. get ('book')}]}); * // *** custom group Ext. grid. feature. grouping * Group Summary Ext. grid. feature. groupingSummary * summarizes all groups of Ext. grid. feature. the Summary * plug-in uses * // to define the model Ext. define ('book', {extend: 'ext. data. model ', fields: ['name', 'topic']}); // create storevar Books = Ext. create ('ext. data. store', {model: 'book', groupField: 'topic ', // Grouping data: [{name: 'learning Ext js', topic: 'ext js'}, {name: 'learning Ext js2.0 ', topic: 'ext js '}, {name: 'learning Ext js3.0 ', topic: 'ext js'}, {name: 'learning PHP5 Tools', topic: 'php'}, {name: 'netbeans IDE 7 cookbook', topic: 'java'}, {name: 'port port 3.7 ', topic: 'java'}, {name: 'python Multimedia', topic: 'python'}, {name: 'nhibbench 3.0 cookbook', topic :'. net'}, {name: 'asp. N Et mvc 2 Cookbook ', topic :'.. NET '}]}); // fill in the data to grid/* Ext. create ('ext. grid. panel ', {renderTo: 'div3', frame: true, store: Books, width: 350, height: 400, title: 'books ', features: [Ext. create ('ext. grid. feature. grouping ', {// use the Grouping plug-in groupHeaderTpl: 'topic: {name} ({rows. length} Book {[values. rows. length> 1? "S": ""]}) '})], columns: [{text: 'name', flex: 1, dataIndex: 'name'}, {text: 'topic ', flex: 1, dataIndex: 'topic'}]}); * // * Ext. create ('ext. grid. panel ', {renderTo: 'div3', frame: true, store: Books, width: 350, height: 400, title: 'books ', features: [{groupHeaderTpl: 'topic: {name} ', ftype: 'groupingsummary' // use group summary plug-in}], www.2cto. comcolumns: [{text: 'name', flex: 1, dataIndex: 'name', summaryType: 'Count', summaryRenderer: function (value) {return Ext. String. format ('{0} book {1}', value, value! = 1? 'S ': '') ;}}, {text: 'topic', flex: 1, dataIndex: 'topic '}]}); */Ext. create ('ext. grid. panel ', {renderTo: 'div3', frame: true, store: Books, width: 350, height: 300, title: 'books ', features: [{ftype: 'summary '// }], columns: [{text: 'name', flex: 1, dataIndex: 'name', summaryType: 'Count', summaryRenderer: function (value) {return Ext. string. format ('{0} book {1}', value, value! = 1? 'S ': '') ;},{ text: 'topic', flex: 1, dataIndex: 'topic '}]}); /*** use of tree */Ext. create ('ext. tree. panel ', {title: 'simple tree', width: 200, store: Ext. create ('ext. data. treestore', {root: {expanded: true, children: [{text: "Menu Option 1", "checked": true, leaf: true}, {text: "Menu Option 2", // "checked": true, expanded: true, children: [{text: "Sub Menu Option 2.1", leaf: true, "checked ": true },{ text: "Sub Menu Option 2.2", leaf: true, "checked": true}] },{ text: "Menu Option 3", "checked ": true, leaf: true}]}), viewConfig: {// implement plugins: {ptype: 'treeviewdragdrop'}, folderSort: true, // sort sorters: [{property: 'text', ction: 'asc '}], rootVisible: false, renderTo: 'tree1 '});});