Ext.js5的分组表格（4）

代码来源：Ext.js5资源包

/*** 这个例子是说明怎么使用表格的分组功能的，再一次用到了store.model，多整几次*/
Ext.define('KitchenSink.view.grid.GroupedGrid', {extend: 'Ext.grid.Panel',xtype: 'grouped-grid',//用到了features属性，这个要参考Ext.gird.feature.Feature。用在Ext.grid.Panel中的插件类型，                                  //有：Ext.grid.feature.Grouping （分组展示表格，并各自指定对应的Ext.data.Store)//Ext.grid.feature.RowBody（为表格的每一行增加一个包含标记的body部分)//Ext.grid.feature.Summary（在表格的底部添加一个摘要行）//因此我终于知道这个requires的用处了requires: ['Ext.grid.feature.Grouping'],collapsible: true,iconCls: 'icon-grid',frame: true,width: 600,height: 400,minHeight: 200,//最小高度title: 'Restaurants',resizable: true,
//features:[]通过在配置中指定一个数组给表格添加特性features: [{ftype: 'grouping',groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',hideGroupedHeader: true,startCollapsed: true,id: 'restaurantGrouping'}],initComponent: function() {this.store = new KitchenSink.store.Restaurants();//在这里仓库是new的，有些地方是直接引用。还不太明白这两个做法的区别20151218this.columns = [{text: 'Name',flex: 1,dataIndex: 'name'},{text: 'Cuisine',flex: 1,dataIndex: 'cuisine'}];this.callParent();var store = this.getStore(),toggleMenu = [];this.groupingFeature = this.view.getFeature('restaurantGrouping');// Create checkbox menu items to toggle associated groupstore.getGroups().each(function(group) {toggleMenu.push({xtype: 'menucheckitem',text: group.getGroupKey(),handler: this.toggleGroup,scope: this});}, this);this.addDocked([{xtype: 'toolbar',items: ['->', {text: 'Toggle groups...',destroyMenu: true,menu: toggleMenu}]}, {xtype: 'toolbar',ui: 'footer',dock: 'bottom',items: ['->', {text:'Clear Grouping',iconCls: 'icon-clear-group',scope: this,handler: this.onClearGroupingClick}]}]);//mon()向任何Observable对象（或者Ext.Element）添加监听器，当组件被销毁时，监听器自动被移除,//mon( Ext.util.Observable/Ext.Element item, Object/String ename, Function fn, Object scope, Object opt )
//addManagedListener的简写方法
//参数：item 监听器的目标项、ename 事件名或者包含事件名属性的对象、fn 可选 如果ename是一个事件名，这就是一个事件处理函数、scope 可选 如果ename是事件名这里就是指事件处理函数执行的作用域 opt 可选 如果ename是事件名，这就是addListener的选项。
//对应的移除方法是mun()this.mon(this.store, 'groupchange', this.onGroupChange, this);this.mon(this.view, {groupcollapse: this.onGroupCollapse,groupexpand: this.onGroupExpand,scope: this});},onClearGroupingClick: function(){this.groupingFeature.disable();},toggleGroup: function(item) {var groupName = item.text;if (item.checked) {this.groupingFeature.expand(groupName, true);} else {this.groupingFeature.collapse(groupName, true);}},onGroupChange: function(store, grouper) {var grouped = store.isGrouped(),groupBy = grouper ? grouper.getProperty() : '',toggleMenuItems, len, i = 0;// Clear grouping button only valid if the store is grouped//down寻找组件的方法不只可以是down('xtype')this.down('[text=Clear Grouping]').setDisabled(!grouped);// Sync state of group toggle checkboxesif (grouped && groupBy === 'cuisine') {toggleMenuItems = this.down('button[text=Toggle groups...]').menu.items.items;for (len = toggleMenuItems.length; i < len; i++) {toggleMenuItems[i].setChecked(this.groupingFeature.isExpanded(toggleMenuItems[i].text));}this.down('[text=Toggle groups...]').enable();} else {this.down('[text=Toggle groups...]').disable();}},onGroupCollapse: function(v, n, groupName) {if (!this.down('[text=Toggle groups...]').disabled) {this.down('menucheckitem[text=' + groupName + ']').setChecked(false, true);}},onGroupExpand: function(v, n, groupName) {if (!this.down('[text=Toggle groups...]').disabled) {this.down('menucheckitem[text=' + groupName + ']').setChecked(true, true);}}
});

store

Ext.define('KitchenSink.store.Restaurants', {extend: 'Ext.data.Store',storeId: 'restaurants',model: 'KitchenSink.model.Restaurant',groupField: 'cuisine',sorters: ['cuisine','name'],data: [{name: 'Cheesecake Factory',cuisine: 'American'},{name: 'University Cafe',cuisine: 'American'},{name: 'Slider Bar',cuisine: 'American'},{name: 'Shokolaat',cuisine: 'American'},{name: 'Gordon Biersch',cuisine: 'American'},{name: 'Crepevine',cuisine: 'American'},{name: 'Creamery',cuisine: 'American'},{name: 'Old Pro',cuisine: 'American'},{name: 'Nola\'s',cuisine: 'Cajun'},{name: 'House of Bagels',cuisine: 'Bagels'},{name: 'The Prolific Oven',cuisine: 'Sandwiches'},{name: 'La Strada',cuisine: 'Italian'},{name: 'Buca di Beppo',cuisine: 'Italian'},{name: 'Pasta?',cuisine: 'Italian'},{name: 'Madame Tam',cuisine: 'Asian'},{name: 'Sprout Cafe',cuisine: 'Salad'},{name: 'Pluto\'s',cuisine: 'Salad'},{name: 'Junoon',cuisine: 'Indian'},{name: 'Bistro Maxine',cuisine: 'French'},{name: 'Three Seasons',cuisine: 'Vietnamese'},{name: 'Sancho\'s Taquira',cuisine: 'Mexican'},{name: 'Reposado',cuisine: 'Mexican'},{name: 'Siam Royal',cuisine: 'Thai'},{name: 'Krung Siam',cuisine: 'Thai'},{name: 'Thaiphoon',cuisine: 'Thai'},{name: 'Tamarine',cuisine: 'Vietnamese'},{name: 'Joya',cuisine: 'Tapas'},{name: 'Jing Jing',cuisine: 'Chinese'},{name: 'Patxi\'s Pizza',cuisine: 'Pizza'},{name: 'Evvia Estiatorio',cuisine: 'Mediterranean'},{name: 'Cafe 220',cuisine: 'Mediterranean'},{name: 'Cafe Renaissance',cuisine: 'Mediterranean'},{name: 'Kan Zeman',cuisine: 'Mediterranean'},{name: 'Gyros-Gyros',cuisine: 'Mediterranean'},{name: 'Mango Caribbean Cafe',cuisine: 'Caribbean'},{name: 'Coconuts Caribbean Restaurant & Bar',cuisine: 'Caribbean'},{name: 'Rose & Crown',cuisine: 'English'},{name: 'Baklava',cuisine: 'Mediterranean'},{name: 'Mandarin Gourmet',cuisine: 'Chinese'},{name: 'Bangkok Cuisine',cuisine: 'Thai'},{name: 'Darbar Indian Cuisine',cuisine: 'Indian'},{name: 'Mantra',cuisine: 'Indian'},{name: 'Janta',cuisine: 'Indian'},{name: 'Hyderabad House',cuisine: 'Indian'},{name: 'Starbucks',cuisine: 'Coffee'},{name: 'Peet\'s Coffee',cuisine: 'Coffee'},{name: 'Coupa Cafe',cuisine: 'Coffee'},{name: 'Lytton Coffee Company',cuisine: 'Coffee'},{name: 'Il Fornaio',cuisine: 'Italian'},{name: 'Lavanda',cuisine: 'Mediterranean'},{name: 'MacArthur Park',cuisine: 'American'},{name: 'St Michael\'s Alley',cuisine: 'Californian'},{name: 'Osteria',cuisine: 'Italian'},{name: 'Vero',cuisine: 'Italian'},{name: 'Cafe Renzo',cuisine: 'Italian'},{name: 'Miyake',cuisine: 'Sushi'},{name: 'Sushi Tomo',cuisine: 'Sushi'},{name: 'Kanpai',cuisine: 'Sushi'},{name: 'Pizza My Heart',cuisine: 'Pizza'},{name: 'New York Pizza',cuisine: 'Pizza'},{name: 'California Pizza Kitchen',cuisine: 'Pizza'},{name: 'Round Table',cuisine: 'Pizza'},{name: 'Loving Hut',cuisine: 'Vegan'},{name: 'Garden Fresh',cuisine: 'Vegan'},{name: 'Cafe Epi',cuisine: 'French'},{name: 'Tai Pan',cuisine: 'Chinese'}]
});

model

Ext.define('KitchenSink.model.Restaurant', {extend: 'KitchenSink.model.Base',fields: ['name', 'cuisine']//model是定义数据类型的地方，但是和属性三很有区别，定义的方式好像不一样，//我觉得可能是因为和data在仓库里面的存储方式不一样的关系。不过为什么有这样的区别20151218
});

Ext.js5的分组表格（4）相关推荐

Ext.js5属性表格（更新数据）（handler和listener的区别）（蓝色的时候是蓝色的combo）（source）(19)
/*** This example shows how to create a property grid from an object. It also demonstrates* updating ...
ExtJS4.2学习(10)分组表格控件--GroupingGrid
分组表格控件在我们的开发中经常被用到,GroupingGrid分组表格就是在普通表格的基础上,根据某一列的数据显示表格中的数据分组的表格控件.举个例子给大家,比如某些信息用树形显示觉得有点大才小用,树 ...
ExtJS4.2学习(10)分组表格控件--GroupingGrid（转）
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...
ExtJs 分组表格控件----监听
ExtJs 分组表格控件----监听 2013年8月1日 10:59 如图,点击expand可以展开所有的分组,collapse可以合并所有的列,toggle和toggleone展开合并一个分组 Ex ...
两个table怎么对齐_Origin教程|“师兄，图表坐标轴下的分组表格是怎么添加的？”...
|撰文:莫北一直觉得origin绘制分组图表应该很简单,我写的第一篇Origin教程<柱状图的坐标轴如何"中断"?>就是直接以分组柱状图做范例的.可真正上手的时候,你 ...
使用Ext.grid.Panel生成表格
使用Ext.grid.Panel生成表格 Ext.grid.Panel继承了Ext.panel.Panel,因此它的很多地方都类似于Ext.panel.Panel,但定义Ext.grid.Panel时 ...
使用jQuery EasyUI的 detailview创建分组表格
使用jQuery EasyUI的 detailview创建分组表格 > 第一次使用markdown编辑,不太会编辑,布局有点乱. 先见效果图下面说下使用方法依赖的js以及css文件引入了b ...
ExtJS4.2学习(14)基于表格的扩展插件（2）
我曾经在第6节里讲到表格分页,还记得之前的分页组件是什么样的吗? 上面只有文字显示,我们来为其制作的更美观点,好吧,不卖关子了,讲本节的内容:进度条分页控件,这是表格扩展组件. 首先我们需要引入扩展组 ...
[转]ExtJS的使用方法汇总—配置和表格控件使用
在网上差一些关于ExtJS的相关资料,看到这篇博客写的不错,拿出来分享一下! 博客文章:ExtJS的使用方法汇总(1)--配置和表格控件使用 ExtJS的使用方法汇总(2) ...

Ext.js5的分组表格（4）

Ext.js5的分组表格（4）相关推荐

最新文章

热门文章