Extjs4 Treegrid 使用心得分享(经验篇)
2013-07-01 17:31
573 查看
/* This file is part of Ext JS 4 Copyright (c) 2011 Sencha Inc Contact: http://www.sencha.com/contact GNU General Public License Usage This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. */ Ext.require([ 'Ext.data.*', 'Ext.grid.*', 'Ext.tree.*' ]); Ext.onReady(function() { //we want to setup a model and store instead of using dataUrl Ext.define('Task', { extend: 'Ext.data.Model', fields: [ {name: 'task', type: 'string'}, {name: 'user', type: 'string'}, {name: 'duration', type: 'string'} ] }); var store = Ext.create('Ext.data.TreeStore', { model: 'Task', proxy: { type: 'ajax', //the store will get the content from the .json file url: 'treegrid.json' }, folderSort: true }); //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel var tree = Ext.create('Ext.tree.Panel', { title: 'Core Team Projects', width: 500, height: 300, renderTo: 'tree-example',//2B的官方和SV党们,这里竟然是getbody,bo你妹啊。 collapsible: true, useArrows: true, rootVisible: false, store: store, multiSelect: true, singleExpand: true, //the 'columns' property is now 'headers' columns: [{ xtype: 'treecolumn', //this is so we know which column will show the tree text: 'Task', flex: 2, sortable: true, dataIndex: 'task' },{ //we must use the templateheader component so we can use a custom tpl xtype: 'templatecolumn', text: 'Duration', flex: 1, sortable: true, dataIndex: 'duration', align: 'center', //add in the custom tpl for the rows tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', { formatHours: function(v) { if (v < 1) { 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'; } else { return v + ' hour' + (v === 1 ? '' : 's'); } } }) },{ text: 'Assigned To', flex: 1, dataIndex: 'user', sortable: true }] }); });
相关文章推荐
- Extjs4 Treegrid 使用心得分享(经验篇)
- ExtJS之TreeGrid使用心得
- 分享两款.NET电子表格组件的使用心得
- [软件分享]aboboo英语复读机 使用心得
- 分享Ctrlbox项目管理软件的财务管理使用心得
- MyWebPagesStarterKit1.1.2汉化使用心得(同时分享汉化版源码)
- 使用FlexiGrid实现Extjs表格效果方法分享
- 高德地图API使用心得分享
- 关于PHP模板Smarty的初级使用方法以及心得分享
- ThinkPHP使用心得分享-分页类Page的用法
- 企业管理软件使用心得独家分享
- eclipse使用技巧心得分享
- “分享智能手机使用心得”新春茶话会·1月29日·北京·希格马中心
- 实例带你了解Retrofit 2.0的使用,分享目前开发Retrofit遇到的坑和心得
- preg_match_all使用心得分享
- 分享一个新软件 云端软件平台+个人使用心得
- Putty的噩梦——渗透工具PuttyRider使用心得分享
- ExtJS2.0.1 ColumnTree控件使用心得
- Extjs使用心得