Extjs的grid和樹以及幾種常用的外掛程式使用詳解

來源:互聯網
上載者:User

Ext.onReady(function() {/*** 1. Grid*//*Ext.create('Ext.grid.Panel', {store : Ext.create('Ext.data.ArrayStore', {fields : [{name : 'book'}, {name : 'author'}],data : [['Extjs4:firstBook', 'joms']]}),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 : 'testG1'});  // 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, '2010/10/01',40.49],['Ext JS 3.0 Cookbook', 'Ext JS', '3', true, '2009/10/01',44.99],['Learning Ext JS', 'Ext JS', '2.x', true, '2008/11/01', 35.99]]});Ext.create('Ext.grid.Panel', {store : store,width : 550,height : 300,title : 'Extjs Books',renderTo : 'grid2',features : [{groupHeaderTp1 : 'Publisher:{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, colIndex) {var recs = grid.getStore().getAt(rowIndex);Ext.MessageBox.alert('Delete', recs.get('book'))}}]}]});*//*** 自訂分組 Ext.grid.feature.Grouping* 分組總結 Ext.grid.feature.GroupingSummary*總結所有組 Ext.grid.feature.Summary* 外掛程式使用*/  // 定義模型Ext.define('Book', {extend : 'Ext.data.Model',fields : ['name', 'topic']});// 建立storevar Books = Ext.create('Ext.data.Store', {model : 'Book',groupField : 'topic',// 按照主題分組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 : 'iReport 3.7',topic : 'Java'}, {name : 'Python Multimedia',topic : 'Python'}, {name : 'NHibernate 3.0 Cookbook',topic : '.NET'}, {name : 'ASP.NET MVC 2 Cookbook',topic : '.NET'}]});// 填充資料給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', {// 使用分組外掛程式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'//使用分組總結外掛程式}],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'}]});  /*** 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 : {//樹葉拖拽實現plugins : {ptype : 'treeviewdragdrop'}},folderSort: true,//排序sorters: [{property: 'text',direction: 'ASC'}],rootVisible : false,renderTo : 'tree1'});});

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.