Ext自动加载自定义组件

/**
 * 自定义表格组件
 * 扩展内容：
 * 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>