ExtJS4.2學習(10)分組表格控件--GroupingGrid
分組表格控件在咱們的開發中常常被用到，GroupingGrid分組表格就是在普通表格的基礎上，根據某一列的數據顯示錶格中的數據分組的表格控件。舉個例子給你們，好比某些信息用樹形顯示以爲有點大才小用，樹形能夠有無限極，可是用了分組表格能夠完美的展現信息，看下圖是個人項目中用到的一個例子，將全部評分項顯示出來，而且動態獲取是否有次數，若是有次數將出現可編輯，沒有次數就不可編輯，若是須要扣分就出現連接，沒有就不出現，這正好結合了咱們前幾節學的知識，看下面的圖：
具體代碼：我這裏是在其餘組件中彈出的這個分組表格控件，因此你們看重點代碼便可，當時寫這個功能可花費了很多時間，你們好好研究哈~javascript
actions.push(
{
text: '評分',
iconCls: 'gradebtn',
listeners: {
'click' : function() {
var xg = Ext.grid;
var store = new Ext.data.GroupingStore({
autoLoad:true,
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'total',
remoteSort: true
},
[
{name:'groupid'},
{name:'groupname'},
{name:'itemid'},
{name:'itemgroupid'},
{name:'itemname'},
{name:'itemvalue'},
{name:'isnumber'},
{name:'status',type:'boolean'},
{name: 'desc'}
]),
proxy: new Ext.data.HttpProxy({
url: window.webRoot + 'rest/qaitem/',
method: 'GET'
}),
sortInfo:{field: 'itemname', direction: "ASC"},
groupField:'groupname'
});
var sm = new Ext.grid.CheckboxSelectionModel();
/** 設置次數
setNumber = function(v){
console.info(v);
var record = sm.getSelected();
record.set('isNumber',v);
}
*/
var grid = new xg.EditorGridPanel({
store: store,
clicksToEdit: 1,
stripeRows:true,
sm: sm,
listeners: {
beforeedit: function(e) {
if (e.record.get("isnumber") == "NO") {
return false;
}else{
return true;
}
}
},
columns: [
{id:'itemname',header: "選項組名稱", width: 270, sortable: true, dataIndex: 'itemname'},
{header: "次數", width: 30, sortable: true, dataIndex: 'isnumber',
editor: new Ext.form.NumberField(),
renderer: function(v,m,r){
return v;
/*
if(v =="YES"){
var showv = (r.data.isnumber=="YES"?'' : r.data.isNumber);
return r.data.isNumber;//"<input type='text' value = '"+showv+"' size='7' onkeyup ='setNumber(this.value)' />";
}else if(v=="NO"){
return "不存在次數";
}else{
return "數據讀取失敗";
}
*/
}
},
{dataIndex: 'groupid',hidden:true},
{dataIndex: 'itemid',hidden:true},
{dataIndex: 'itemgroupid',hidden:true},
{dataIndex:'status',hidden:true},
{header:'分值', width:20, sortable:true, dataIndex: 'itemvalue',
renderer: function(v,m,r){
// m.css='x-grid-bak-blue';
var str = "<a href='javascript:void(0);'>"+v+"</a>";
var str1 = "<a href='javascript:void(0);'>取消</a>";
if(r.data.isnumber != "NO" ){
return v;
}
return !r.data.status?str : str1;
}
},
{header: "評分選項組", width: 30, sortable: true, dataIndex: 'groupname'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "項" : "個"]})'
}),
frame:true,
loadMask:true,
layout: 'fit',
width: 950,
height: 450
});
points = function(is){
var r = sm.getSelected();
if(r.data.isnumber != "NO"){
//轉換成int操做 次數和是否扣分了
}
r.set('fenshu', r.data.itemvalue);
r.set('status',!is);
r.commit();
}
var win = new Ext.Window({
title:'質檢評分',
width:955,
height:515,
region:'center',
iconCls: 'gradebtn',
layout: 'fit',
resizable:true,
modal:true,
closeAction:'hide',
items:[grid],
buttons:[{
text:'保存',
listeners : {
'click' : function() {
var fenshu = '',itemname ='';
var status = '',itemgroupid ='';
var isNumber = '',itemid='';
var groupid = '',grouptypeid='',groupname='';
for (var i = 0; i<store.data.items.length; i++) {
var rco = store.getAt(i);
if(i==store.data.items.length-1){
fenshu +=rco.get('itemvalue');
status += rco.get('status');
groupid += rco.get('groupid');
groupname += rco.get('groupname');
itemid += rco.get('itemid');
itemgroupid += rco.get('itemgroupid');
itemname += rco.get('itemname');
if(rco.get('isnumber')=='YES'||rco.get('isnumber')=='NO'||rco.get('isnumber')==''){
isNumber += '0';
}else{
isNumber += rco.get('isnumber')+'';
}
}else{
fenshu +=rco.get('itemvalue')+',';
status += rco.get('status')+',';
groupid += rco.get('groupid')+',';
groupname += rco.get('groupname')+',';
itemid += rco.get('itemid')+',';
itemgroupid += rco.get('itemgroupid')+',';
itemname += rco.get('itemname')+',';
if(rco.get('isnumber')=='YES'||rco.get('isnumber')=='NO'||rco.get('isnumber')==''){
isNumber += '0,';
}else{
isNumber += rco.get('isnumber')+',';
}
}
}
Ext.Ajax.request({
url : window.webRoot + 'rest/qaitemscore/',
params: {
userId:'<%=userId%>',
recordId:rec.get('id'),
ani:rec.get('ani'),
dnis:rec.get('dnis'),
callType:rec.get('callType'),
begintime:formatDateTime(rec.get('beginTime')),
endtime:formatDateTime(rec.get('endTime')),
length:rec.get('callTime'),
extno:rec.get('extNo'),
fileName:rec.get('fileName'),
agentNo:rec.get('agentNo'),
itemvalue: fenshu,
status: status,
isNumber: isNumber,
groupid: groupid,
grouptypeid: grouptypeid,
groupname: groupname,
itemid: itemid,
itemgroupid: itemgroupid,
itemname: itemname,
callId: rec.get('callId'),
assigenederid: rec.get('assigeneder')
},
success: function(res) {
myMask.hide();
var respText = Ext.decode(res.responseText);
if(respText.code == 'OK') {
Ext.Msg.alert('系統提示', '評分紅功');
close();
} else {
Ext.Msg.alert('保存失敗', respText.message + "（" + respText.code + "）");
}
},
failure: function(res) {
myMask.hide();
var respText = Ext.decode(res.responseText);
Ext.Msg.alert('保存失敗', respText.message + "（" + respText.code + "）");
},
method: 'POST'
});
}
}
},{
text:'取消',
listeners : {
'click' : function() {
close();
}
}
}]
}).show();
var close=function(){
win.hide();
}
}
}
}
);
面的是否是以爲有點複雜了？額。。個人錯，下面來看個簡單的：
這個就簡單許多啦，看下主要代碼，相信聰明的你必定能明白：css
var columns = [
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
];
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
var store = new Ext.data.ArrayStore({
fields:[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'descn'}
],
data:data,
groupField:'sex', //肯定哪一項分組
sorter:[{property:'id', //排序屬性
direction:'ASC'} //排序方式
]
});
var grid = new Ext.grid.GridPanel({
autoHeight:true,
store:store,
columns:columns,
features:[{ftype:'grouping'}],
renderTo:'grid'
});
這裏的fields和data仍是原來的示例同樣，主要關注的是groupField，它肯定經過哪一項進行分組。store能夠設置sorter參數，這個參數對應的值有2項：property是排序的屬性，direction是排序的方式。咱們把數據傳入，輸出顯示的就是分紅一組一組的數據。可是，若是想顯示成咱們期待的那種形式，還須要設置feature爲grouping
另外，分組表格控件的視圖是有特殊功效的，經過它能夠實現分組表格專用的對應功能，以下代碼所示：html
//分組表格視圖
Ext.get('expand').on('click',function(){
grid.view.features[0].expandAll();
});
Ext.get('collapse').on('click',function(){
grid.view.features[0].collapseAll();
});
Ext.get('one').on('click', function() {
var feature = grid.view.features[0];
if (feature.isExpanded('female')) {
feature.expand('female');
feature.collapse('female');
} else {
feature.collapse('female');
feature.expand('female');
}
});
固然實現上面的代碼功能必需要有3個button了，每一個id設置對應的點擊事件，上例中expandAll()展現全部分組，collapseAll()摺疊全部分組。若是想自動判斷分組的狀態進行對應的摺疊或展開操做---當分組都已摺疊時執行展開全部分組，當分組都已展開時執行摺疊全部分組，這就須要咱們本身寫代碼來判斷分組的狀態了。這部分還存在着一個初始化的小問題，每次雖然分組顯示的都是展開，可是feature.isExpanded()返回的都是false，因此要重複調用collapse()和expand()兩個函數，才能實現正常切換。
好了，如今你也來動手嘗試下吧。
連載中，請你們持續關注，本文出自個人我的網站思考者日記網java
相關文章
- 1. ExtJS4.2學習(三)Grid表格
- 2. ExtJS4.2學習(九)屬性表格控件PropertyGrid
- 3. ExtJS4.2學習(11)可拖放的表格
- 4. ExtJS4.2學習(七)EditorGrid可編輯表格
- 5. ExtJS4.2學習(15)樹形表格
- 6. ExtJS4.2學習(18)時間控件
- 7. ExtJs4.2—Window組件
- 8. ExtJS4.2學習(14)基於表格的擴展插件（2）
- 9. ExtJS4.2學習(13)基於表格的擴展插件---rowEditing
- 10. ExtJS4.2學習(17)表單基本輸入控件Ext.form.Field
- 更多相關文章...
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • Markdown 表格 - Markdown 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章