本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。
ExtJS4.2学习(15)树形表格 阅读原文» 
ExtJS4.2学习(15)树形表格
阅读更多内容
ExtJS4.2学习(15)树形表格 本节为ExtJS表格学习的最后一节，学完我将学习表单与输入控件的内容。
树形表格（TreeGrid）同时具备树形的分级结构和表格的丰富内容。
先引入扩展组件，老规矩：
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../ExtJS4.2/ux/'); 'Ext.ux.CheckColumn' |
接下来创建TreeGrid
Ext.onReady(function(){ Ext.QuickTips.init(); //we want to setup a model and store instead of using dataUrl Ext.define('Task', { extend: 'Ext.data.Model', {name: 'task', type: 'string'}, {name: 'user', type: 'string'}, {name: 'duration', type: 'string'} var store = Ext.create('Ext.data.TreeStore', { //the store will get the content from the .json file url: 'treegrid-data.json' //Ext.ux.tree.TreeGrid在UX扩展中也有，但不常用，您可以简单地使用一个tree.TreePanel var tree = Ext.create('Ext.tree.Panel', { title: 'Core Team Projects', renderTo: 'treegrid', collapsible: true, rootVisible: false, multiSelect: true, singleExpand: true, //the 'columns' property is now 'headers' xtype: 'treecolumn', //this is so we know which column will show the tree //we must use the templateheader component so we can use a custom tpl xtype: 'templatecolumn', dataIndex: 'duration', //add in the custom tpl for the rows tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', { formatHours: function(v) { return Math.round(v * 60) + ' mins'; } else if (Math.floor(v) !== v) { var min = v - Math.floor(v); return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm'; return v + ' hour' + (v === 1 ? '' : 's'); text: 'Assigned To', dataIndex: 'user', xtype: 'checkcolumn', dataIndex: 'done', stopSelection: false menuDisabled: true, xtype: 'actioncolumn', tooltip: 'Edit task', icon: '../MyDemo/images/edit.png', handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) { Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task')); |
在列定义中有xtype: 'treecolumn',这是告诉列要以树形列来显示，在以后的表单或其他容器中也会以这样的方式来显示，有panelcolumn等，这里等以后讲到再说。
再看下JSON数据格式，后台只要符合这种形式，EXTJS就会给你自动解析出来：
没有评论:
发表评论