* 自定义表格组件
* 扩展内容:
* 1、单元格自动添加内容title提示浮动框
* 2、默认表头样式为居中,可以修改样式x-column-header-text-center 或者设置自定义样式
* 3、默认添加单双行的颜色及鼠标浮动到某行时字体变大,通过样式yp-grid-row0 yp-grid-row1 实现
* 4、单元格内容对其方式,默认为左对齐,数字为右对齐
* 5、对设置type='number'的列自动进行格式化,默认格式为0.000(三位小数),可有通过设置numFormate属性进行设置
* 6、添加针对修改,删除按钮的校验方法。
* 7、是否自动求和isSum 默认为false
*/
Ext.define("/webenv/yu/ux/grid/YuGrid", {
extend : "Ext.grid.Panel",
alias : "widget.YuGrid",
xtype : "YuGrid",
requires : ['Ext.Number'],
columnLines : true,
rowLines : true,
numFormate:'0.000',
autoScroll : true,
isSum:false,
isPage : false,
plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 20,
leadingBufferZone: 50
},
initComponent : function() {
var me = this;
if(me.isSum){
Ext.apply(this,{
features: [{
ftype: 'summary'
}]
});
};
if(me.viewConfig){
Ext.apply(this,{
viewConfig : me.viewConfig
});
};
//重新构造表格的列
var newColumns = [];
newColumns.push({
xtype : 'rownumberer',
header:'序号',
width:40,
style : 'color:#008883;',
align:'center'
});
var defaults, items;
var headerCt = me.columns;
var headerCtCt = {};
if(Ext.isArray(headerCt)){
items = headerCt;
}else{
items = headerCt.items;
headerCtCt = headerCt;
}
if(headerCtCt.defaults){
if(!headerCtCt.defaults.cls){
headerCtCt.defaults.cls = 'x-column-header-text-center';
}
}else{
headerCtCt.defaults = {};
headerCtCt.defaults.cls = 'x-column-header-text-center';
}
Ext.Array.each(items,function(item,index){
var column = Ext.clone(item);
column.align = item.align || 'left';
if(index === 0 && me.isSum){
column.summaryRenderer = function(value, summaryData, dataIndex) {
return '合计:';
}
};
if(item.xtype && item.xtype == 'actioncolumn'){
}else{
if(item.type && item.type === 'number'){
column.align = 'right';
if(me.isSum){
column.summaryType = 'sum';
column.summaryRenderer = function(value, summaryData, dataIndex) {
return Ext.util.Format.number(Ext.Number.from(value,''),me.numFormate);
}
}
if(!column.renderer){
column.renderer = function(val){
var v = Ext.util.Format.number(Ext.Number.from(val,''),me.numFormate);
return Ext.String.format('<span title="{0}" style="cursor:pointer;">{0}</span>', v);
}
}
}else{
if(!column.renderer){
column.renderer = function(val){
return Ext.String.format('<span title="{0}" style="cursor:pointer;">{0}</span>', val);
}
}
}
}
newColumns.push(column);
});
headerCtCt.items = newColumns;
Ext.apply(this,{
columns: headerCtCt
});
if(me.isPage){
Ext.apply(this,{
bbar: Ext.create('Ext.PagingToolbar', {
store: me.store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
emptyMsg: "没有数据"
})
});
}
me.callParent(arguments);
},
/**
* 单双行的样式
*/
viewConfig:{
/* getRowClass:function(record,rowIndex,rowParams,store){
var cls;
switch(rowIndex % 2){
case 1:
cls = 'yp-grid-row1';
break;
case 0:
cls = 'yp-grid-row0';
break;
};
return cls;
}*/
enableTextSelection:true
},
/**
* 修改按钮点击前的校验方法
* @param opt 操作名称
*/
updateValid : function(opt){
var me = this;
var lastRecord;
if(!opt){
opt = '修改';
}
var runRecord = this.getSelectionModel().getSelection();
if(!runRecord || runRecord.length == 0){
Ext.Msg.alert("提示:","请选择要" + opt + "的相关信息!");
return;
};
if(runRecord.length > 1){
Ext.Msg.alert("提示:","不能同时" + opt + "多条信息!");
return;
};
lastRecord = runRecord[0];
return lastRecord;
},
/**
* 删除按钮点击前的校验方法
*/
deleteValid : function(key){
var me = this;
var lastRecord = this.getSelectionModel().getSelection();
if(!lastRecord || lastRecord.length == 0){
Ext.Msg.alert("提示:","请选择要删除的相关信息!");
return;
};
var del_ids = "";
Ext.Array.each(lastRecord,function(rec){
var checkdata = rec.get(key);
del_ids = del_ids + checkdata + ','
});
del_ids = del_ids.substr(0,del_ids.length-1);
return del_ids;
},
/**
* 重新设置小数位
* @param {} formate
*/
resetNumFormate : function(formate){
var me = this;
if(formate){
me.numFormate = formate;
me.getView().refresh();
}
},
/**
* 数据行上移
*/
upRecords : function(){
var me = this;
var runRecord;
if(me.selType == 'checkboxmodel'){
runRecord = me.getSelectionModel().getSelection();
if(runRecord.length==0){
Ext.Msg.alert('提示:','请选择要上移的行!');
return;
};
var index = me.store.indexOf(runRecord[0]);
Ext.Array.each(runRecord,function(rec){
var num = me.store.indexOf(rec);
if(num<index){
index = num;
}
});
//重新进行所取数组排序
var newRecord = Ext.Array.sort(runRecord,function(a,b){
return me.store.indexOf(a) - me.store.indexOf(b);
});
if(index > 0){
me.store.remove(newRecord);
me.store.insert(index - 1,newRecord);
me.getView().refresh();
me.getSelectionModel().select(newRecord,true);
}else{
me.store.remove(newRecord);
me.store.insert(0,newRecord);
me.getView().refresh();
me.getSelectionModel().select(newRecord,true);
}
}else{
runRecord = me.getSelectionModel().getLastSelected();
if(!runRecord){
Ext.Msg.alert('提示:','请选择要上移的行!');
return;
};
var index = me.store.indexOf(runRecord);
if(index > 0){
me.store.remove(runRecord);
me.store.insert(index - 1,runRecord);
me.getView().refresh();
me.getSelectionModel().select(runRecord,true);
}
}
},
/**
* 数据行下移
*/
downRecords : function(){
var me = this;
var runRecord;
if(me.selType == 'checkboxmodel'){
runRecord = me.getSelectionModel().getSelection();
if(runRecord.length==0){
Ext.Msg.alert('提示:','请选择要下移的行!');
return;
};
var max = me.store.indexOf(runRecord[runRecord.length-1]);
var minIndex = Number.MAX_VALUE;
Ext.Array.each(runRecord,function(rec){
var num = me.store.indexOf(rec);
if(num > max){
max = num;
}
});
//确定插入位置
var index = max-(runRecord.length-1);
//重新进行所取数组排序
var newRecord = Ext.Array.sort(runRecord,function(a,b){
return me.store.indexOf(a) - me.store.indexOf(b);
});
if(max+1 < me.store.count()){
me.store.remove(newRecord);
me.store.insert(index+1,newRecord);
me.getView().refresh();
me.getSelectionModel().select(newRecord,true);
}else{
me.store.remove(newRecord);
me.store.insert(me.store.count(),newRecord);
me.getView().refresh();
me.getSelectionModel().select(newRecord,true);
}
}else{
runRecord = me.getSelectionModel().getLastSelected();
if(!runRecord){
Ext.Msg.alert('提示:','请选择要下移的行!');
return;
};
var index = me.store.indexOf(runRecord);
if(index+1 < me.store.count()){
me.store.remove(runRecord);
me.store.insert(index + 1,runRecord);
me.getView().refresh();
me.getSelectionModel().select(runRecord,true);
}
}
},
/**
* 获取指定列的值组成的字符串,以','隔开,如果是复选表格,则获取选中的所有行该列值
* @param {} key 指定的列名
*/
getDataStr : function(key){
var me = this;
var records;
var ids = "";
if(me.selType == 'checkboxmodel'){
records = me.getSelectionModel().getSelection();
}else{
records = me.store.data.items;
};
if(records.length == 0){
return ids;
};
Ext.Array.each(records,function(rec){
var id = rec.get(key);
ids += id + ','
});
ids = ids.substr(0,ids.length-1);
return ids;
},
/**
* 获取表格store里的所有数据,返回数据组成的数组,向后台传该数据时,需调用Ext.JSON.encode()方法进行编码
*/
getAllData : function(){
var me = this;
var dataArray = [];
var records = me.store.data.items;
if(records.length == 0){
Ext.Msg.alert('提示:','没有所需的数据!');
return;
};
Ext.Array.each(records,function(rec){
dataArray.push(rec.data);
});
return dataArray;
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/webenv/ext420663/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/webenv/icon/ext-icon.css" rel="stylesheet" type="text/css" />
<link href="/webenv/test/demo.css" rel="stylesheet" type="text/css" />
<link href="/webenv/yu/css/yuMain.css" rel=stylesheet type=text/css />
<script type="text/javascript" src="/webenv/ext420663/ext-all-debug.js"></script>
<script type="text/javascript" src="/webenv/ext420663/locale/ext-lang-zh_CN.js"></script>
<script type=text/javascript src="/webenv/yu/ux/grid/MergeCell.js"></script>
<!--
<script type=text/javascript src="/webenv/yu/ux/grid/YuGrid.js"></script>
-->
<script type=text/javascript src="/webenv/yu/ux/data/YuStore.js"></script>
<title>Insert title here</title>
</head>
<body>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('yu.ux.data.YuStore', {
storeId:'simpsonsStore',
autoLoad : false,
//sorters: ["email","nvalue"],
fields:['name', 'email', 'phone','numvalue','nvalue'],
data:{'items':[
{ 'name': 'Marge', "email":"【芦台站】芦台站603", "phone":"测试字符长度测试字符长度测试字符长度测试字符长度测试字符", "numvalue":"239.12345", "nvalue":"11"},
{ 'name': 'Marge', "email":"【芦台站】芦台站602", "phone":"555-222-1234555-222-1234", "numvalue":"239.12345", "nvalue":"10"},
{ 'name': 'Marge', "email":"【芦台站】芦台站5073-72", "phone":"555-222-1253", "numvalue":"", "nvalue":"2"},
{ 'name': 'Marge', "email":"【芦台站】芦台站5061-62", "phone":"555-222-1254", "numvalue":"", "nvalue":"3"},
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
注意类名与文件名要一致
var yuSigGrid = Ext.create('/webenv/yu/ux/grid/YuGrid',{
title: '普通单表格测试',
height: 600,
width: 400,
id : 'yugrid',
isSum: true,
checkType : 'rowmodel',
selType: 'checkboxmodel',
tbar: toolbar,
region: 'west',
autoScroll : true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns:[
{ text : '单选', dataIndex:'name',
renderer: function(value, metaData, record, rowIdx, colIdx, store){
return "<input type='radio' name='billingPlansRadio' value='学生' checked='checked' id='"+record.data.name+"'/>"+record.data.name
+"<input type='radio' name='billingPlansRadio' value='学生1' checked='checked' id='"+record.data.name+"'/>"+record.data.name+"";
}
},
{ text: '第一列', dataIndex: 'name'},
{ header : '第二列', dataIndex: 'email', flex: 1},
{ text: '第三列', dataIndex: 'phone'},
{ text: '第四列', dataIndex: 'numvalue',type:'number' },
{ text: '第五列', dataIndex: 'nvalue',width:200,type:'number',
editor : {
xtype : 'textfield',
allowBlank : false
}
},{
text : '第六列',xtype : 'actioncolumn',align: 'center',items : [{
iconCls : 'ext-icon-action-edit',
tooltip : '修改',
handler : function(grid, rowIndex, colIndex){
alert('A'+rowIndex)
}
},{
iconCls : 'ext-icon-action-delete',
tooltip : '删除',
handler : function(grid, rowIndex, colIndex){
alert('B'+rowIndex)
}
},{
iconCls : 'ext-icon-action-add',
tooltip : '新增',
handler : function(grid, rowIndex, colIndex){
alert('C'+rowIndex)
}
}]
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
width : 500,
items: [{
text: '新增'
},{
text:'修改',
handler : function(){
var lastRecord = Ext.getCmp('yugrid').updateValid();
if(lastRecord){
alert(lastRecord.get('name'));
}else{
return;
}
}
},{
text: '删除',
handler : function(){
alert("删除");
var id = Ext.getCmp('yugrid').deleteValid('name');
alert("id = " + id);
}
},{
text: '改变小数位',
handler : function(){
var grid = Ext.getCmp('yugrid');
grid.resetNumFormate('0');
}
},{
text:'上移',
handler : function(){
var grid = Ext.getCmp('yugrid');
grid.upRecords();
}
},{
text:'下移',
handler : function(){
var grid = Ext.getCmp('yugrid');
grid.downRecords();
}
},{
text:'获取指定列数据',
handler : function(){
var grid = Ext.getCmp('yugrid');
var data = grid.getDataStr('email');
alert(data);
}
},{
text:'获取所有数据',
handler : function(){
var grid = Ext.getCmp('yugrid');
var data = grid.getAllData();
alert(Ext.JSON.encode(data));
}
}]
});
Ext.Loader.setConfig({
enabled : true,
paths : {
'myux': '/webenv/yu/ux/grid'
}
});
/*Ext.getCmp('yugrid').getStore().on('load',function(element, records, successful, eOpts){
setTimeout(function(){
if(successful){
mergeCells(Ext.getCmp('yugrid'),[3]);
}
},150);
});
*/
Ext.create('Ext.container.Viewport', {
layout: 'column',
padding: 5,
overflowY: 'auto',
defaults: {
columnWidth: .48
},
items: [
yuSigGrid,
{
xtype: 'container',
region: 'center',
padding: '0 10',
margin: '0 0 0 5',
contentEl: 'describe'
}
]
});
Ext.data.StoreManager.lookup('simpsonsStore').load();
});
</script>
</html>