ExtJs中的分组表格应用中,怎样实现 单击分组标题选中该标题,双击或点击...
发布网友
发布时间：2022-05-01 16:05
共3个回答
懂视网
时间：2022-04-25 07:12
两点需要注意的地方：
1、在创建store时，需要设置groupField属性的值，即为需要分组的值
for example:
JavaScript代码
在这个数据模型中，我们需要以性别(sex)分组，那么请看下面的store
JavaScript代码
接下来，我们需要定义分组显示的tpl
JavaScript代码
在gridPanel中，代码如下：配置features为上述定义的groupingFeature
JavaScript代码
效果图如下：
当然实现分组后，在gridPanel中sex这一列就可以不用显示。
需要注意的是store中的数据如果在变化的时候，分组是不是也可以正常显示呢？
现在给grid增加一个itemclick事件，代码如下：
JavaScript代码
效果如下图
可以看出来，界面并不是我们想要的，那么如何解决呢？（最开始愚笨的解决方案是我将此gridPanel移除并销毁掉，重新加载）我将listeners监听事件的代码做了一些变换
JavaScript代码
再看效果：
这个就是我们想要的效果，在动态变化store中的数据时，分组也要实现，而不是将数据追加在gridPanel的最后。对应这两段代码的区分，主要在，store添加数据的方法，前者是add(record),后者是loadData(records,[append])
起初不能理解为什么同样是store添加数据，效果却不一样，看官方文档的解释，add(),The new Model instances will be added at the end of the existing collection.(将数据追加在集合的最后）恍然大悟，loadData是按照store的规则将数据加载进来。
另外，如何移除组中最旧一行，自己动手查了一下，文档实现了，在这里与大家分享：
//将前面的listeners监听事件修改如下：
注意其中first([boolean group])方法，如果不传参数，获取的是store中的第一条数据，传参为true时，返回的是store分组以组名为key，组内第一条数据为value的多个对象，PersonStore.first(true).female获取female组内的第一条数据，想获取male中的，可以使用PersonStore.first(true).male
JavaScript代码
为避免removedRecords占用内存，进行了进一步的处理，功能可以实现，但是方法有些笨，大家有好的办法可以交流交流
看代码：
结果为0 // console.log(PersonStore.getAt(0)); } }
热心网友
时间：2022-04-25 04:20
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'instry'},
{name: 'desc'}
]);
var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.mmyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'instry'
});
var grid = new xg.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Instry", width: 20, sortable: true, dataIndex: 'instry'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
renderTo: document.body
});
});
// Array data for the grids
Ext.grid.mmyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];
// add in some mmy descriptions
for(var i = 0; i < Ext.grid.mmyData.length; i++){
Ext.grid.mmyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, i. Pellentesque ut nisl. Maecenas tortor turpis, interm non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibenm purus, sit amet tincint quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus i, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincint diam nec urna. Curabitur velit.');
}
参考资料：http://dev.sencha.com/deploy/dev/examples/grid/grouping.html
热心网友
时间：2022-04-25 05:38
