背景:
忙了半年多的ORACLE的EBS还没来得及总结,现在就要开发一些后台系统的数据展示,每次要重新写前端,使后台开发人员精力不够集中,趁现在现在有时间对EXT5的GRID组件进行了扩展,分享给大家,无废话,上代码。
效果图:
使用方法:
1.导入ExtensionGrid.js到页面
2.配置表格相关属性
代码:
1.配置方法:
Ext.onReady(function(){
var EasyGrid=new Ext.ux.EasyGrid({
title: 'EasyGrid',
headers: [ '字段一', '字段二', '字段三'],//表头显示的字段名
fields: [ 'title', 'status', 'description'],//后台传过来的字段名
fieldType:['textfield','checkboxfield','filefield'],//每个字段的类型
pageSize:2,// 显示行数,不配置默认12
findUrl:'TestExt?getData=true',// 加载数据和搜索处理的URL
addUrl:'TestExt?addData=true',//添加数据后提交处理的后台URL
delUrl:'TestExt?delData=true',//删除数据提交处理的后台URL
editUrl:'TestExt?eidtData=true',//编辑数据提交处理的后台URL
opt:["add","del","edit"],//操作按钮隐藏,不用显示哪个就写哪个,如果要增、删、改、查,可以忽略
renderTo: 'easyGrid'
});
});
2.引用的ExtensionGrid.js代码
Ext.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function () {
this.autoHeight = true,
this.stripeRows=true,// 斑马线效果
this.selType='checkboxmodel',
this.findKey='',
this.viewConfig = {
enableTextSelection:true,
forceFit: false
};
this.createStore(); // 创建Store
this.createColumns(); // 创建列模型
this.createTbar(); // 创建GridPanel头部的工具栏
this.createBbar(); // 创建GridPanel尾部的状态栏
// 父类的构造函数
Ext.ux.EasyGrid.superclass.initComponent.call(this);
},
createStore: function () {
var that = this;
// 二维数组
// 代理
var proxy = null;
var pageSize = 12;
if(this.pageSize>0){
pageSize = this.pageSize;
}
if (this.type == "array") {
proxy =new Ext.data.MemoryProxy({
data: this.datas,
reader: {
type: 'json'
},
enablePaging: true });
} else {
proxy = new Ext.data.HttpProxy({
type:'ajax',
url: this.findUrl,
reader:{
type:'json',
rootProperty:'rows',
totalProperty:'results'
}
});
}
this.store = new Ext.data.Store({
fields:this.fields,
pageSize: pageSize,
proxy: proxy,
autoLoad: {
start:0,
limist:this.pageSize
}
});
this.store.on('beforeload',function(store, operation, eOpts ){
var extraParams={
findKey:that.findKey
};
Ext.apply(store.proxy.extraParams, extraParams);
});
},
createColumns: function () {
var cols = [];
for (var i = 0; i < this.fields.length; i++) {
var header = this.headers[i];
var f = this.fields[i];
cols.push({
header: header,
dataIndex:f
});
}
this.columns = cols;
},
/**
* 判断操作按钮是否显示隐藏
*/
isvisible:function(param){
console.log(param);
var opt = this.opt;
if(opt!=undefined && opt !=null){
for(var i=0;i<opt.length;i++){
if(param==opt[i]){
return true;
}
}
}
return false;
},
createTbar: function () {
var that =this;// 需要将表格this转换,否则下面的this会有问题
this.tbar = Ext.create('Ext.toolbar.Toolbar', {
items: [
{
// xtype: 'button', // default for Toolbars
text: '添加',
// xtype:'button',
icon: "com/icons/Add1.png",
id:'add',
hidden:that.isvisible('add'),
listeners:{
'click': function(){
that.createRecord();
}
}
},
{
text:"修改",
id:'edit',
icon: "com/icons/edit1.png",
hidden:that.isvisible('edit'),
iconCls: "x-tbar-update",
listeners:{
'click': function(){
that.updateRecord();
}
}
},
{
text: "删除",
icon: "com/icons/Del1.png",
id:'del',
iconCls: "x-tbar-del",
hidden:that.isvisible('del'),
listeners:{
'click': function(){
that.removeRecord();
}
}
},
{
xtype : 'textfield',
name : 'searchKey',
enableKeyEvents:true,
triggerCls:'x-form-clear-trigger',
onTriggerClick:function(){
this.reset();
that.store.clearFilter();
// that.store.filter('id');
},
emptyText: '输入搜索关键字',
listeners:{
'change': function(){
// 1.判断对本地进行搜索还是远程搜索
// 2.远程搜索
// 3.本地搜索
var _this = this;
setTimeout(that.keyupProcess(_this),700);
}
}
}
]
});
},
keyupProcess:function(_this){
var searchKey = _this.getValue();
if(this.searchConf!=null && this.searchConf.local){
// 本地过滤
this.localFilterStore(searchKey);
}else{
// 远程过滤
this.remoteFilterStore(searchKey);
}
},
remoteFilterStore:function(searchKey){
var findUrl = this.findUrl;
this.findKey =searchKey;
this.store.reload({
params:{
start:0,
limit:this.pageSize
}
});
/*
* Ext.Ajax.request({ url: findUrl, params: { findKey:searchKey },
* success: function(response){ var text = response.responseText;
* Ext.Msg.alert("提示",text); } });
*/
},
localFilterStore:function(searchKey){
var that = this;
var v;
try{
v =new RegExp(searchKey,'i');
this.store.clearFilter(true);
if( !(that.queryFields!=null && that.queryFields.length>0)){
Ext.Msg.alert("提示","配置字段queryFields为空!");
return ;
}
this.store.filter({
filterFn:function(rec){
// 要搜索哪些字段
var visible=false;
for(var i=0;i<that.queryFields.length;i++){
console.log(rec.get(that.queryFields[i]));
visible = v.test(rec.get(that.queryFields[i]));
if(visible){break;}
}
return visible;
}
});
}catch(e){
}
},
createBbar: function() {
this.bbar = new Ext.PagingToolbar({
store: this.store
});
},
createRecord: function () {
this.Action = "create"; // 自定义属性,表明是添加操作
this.showWindows(); // 窗体显示的方法
var form = this.getForm(); // 得到窗体中的Form
form.baseParams = {
create:true
}
// 根据json对象自动找表单内容 本身为空 把窗体还原
form.reset();
},
updateRecord:function(){
// 行选择模型
var r = this.getSelectedRecord();
if (r!=null) {
this.Action = "update";
this.showWindows();
// 得到当前的Form();
var form = this.getForm();
form.baseParams = {
create: false
};
// 把对象加载进去
form.reset();
form.loadRecord(r[0]);
}
},
cuxAjax:function(params,callback){
Ext.Ajax.request({
url: params.url,
params:params.args,
success:function(response,opts){
callback(response,opts);
},
failure:function(response,opts){
Ext.Msg.alert("Failure","请求失败,请联系管理员!");
}
});
},
storeReload:function(){
this.store.reload({
params : {
start : this.store.currentPage-1,
limit : this.pageSize
}
});
},
removeServerRecord:function(recs){
var json = [];
for(var i=0;i<recs.length;i++){
json.push(recs[i].getData());
}
var that =this;
var params={};
params.url = this.delUrl;
params.args ={
delDate:Ext.encode(json)
}
this.cuxAjax(params,function(response,opts){
Ext.Msg.alert("提示",response.responseText);
that.storeReload();
});
},
removeRecord: function () {
var r = this.getSelectedRecord();
var that =this;
if (r!=null) {
this.Action = "delete";
Ext.Msg.confirm("提示", "您确认要删除选择的记录吗?", function (btn) {
if (btn == "yes") {
try {
// 删除本地的记录
// that.store.remove(r[0]);
// 删除服务器上的记录
that.removeServerRecord(r);
} catch (e) {
Ext.Msg.alert("提示","删除异常!");
}
}
});
}
},
getSelectedRecord:function() {
var sm = this.getSelectionModel();
if (sm.getCount() == 0) {
Ext.Msg.alert("提示", "请选择一行");
return null;
} else {
return sm.getSelection();
}
},
// 得到空的函数
getEmptyRecord: function () {
// 空的json对象
var r = "{";
for (var i = 0; i < this.fields.length; i++) {
var f = this.fields[i];
// 给对象产生属性 并赋值 为空
r+=f+":''";
if(i!=this.fields.length-1){
r+=",";
}
}
r+='}';
return r;
},
submitRecord: function () {
var form = this.getForm();
// 如果为添加
if (form.baseParams.create) {
this.addRecord();
} else {
this.changeRecord();
}
this.hideWindow();
},
// 添加记录
addRecord:function(){
// 得到表单的对象
var form = this.getForm();
// 得到表单域的值
var values = form.getValues();
console.log(values);
console.log(Ext.encode(values));
// 提交到服务器
var that =this;
var params={};
params.url = this.addUrl;
params.args ={
addDate:Ext.encode(values)
}
this.cuxAjax(params,function(response,opts){
Ext.Msg.alert("提示",response.responseText);
that.storeReload();
});
// 得到空的json
/*
* var json = Ext.decode(this.getEmptyRecord()); for (var name in
* values) { json[name] = values[name]; }
*/
// this.store.add(json);
// this.store.commitChanges();
},
// 修改记录
changeRecord:function(){
// 得到表单的对象
var form = this.getForm();
// 得到表单域的值
var values = form.getValues();
// 得到选择的行
// var r = this.getSelectedRecord();
try {
/*
* this.store.beginUpdate(); var rec =
* this.store.getById(r[0].get("id"));
*
* for (var name in values) { rec.set(name, values[name]); }
* this.store.endUpdate();
*/
// 提交到远端服务器
this.changeServerRecord(values);
} catch (e) {
Ext.Msg.alert("提示","提交修改异常!");
// console.log(e);
}
},
changeServerRecord:function(values){
// 提交到服务器
var that =this;
var params={};
params.url = this.editUrl;
params.args ={
editDate:Ext.encode(values)
}
this.cuxAjax(params,function(response,opts){
Ext.Msg.alert("提示",response.responseText);
that.storeReload();
});
},
// 得到Panel中的方法
getForm: function () {
// 得到当前的表单对象
return this.getFormPanel();
},
getFormPanel: function () {
if (!this.gridForm) {
// 不存在创建一个
this.gridForm = this.createForm();
// 存在就直接返回
}
return this.gridForm;
},
// 创建一个窗体的按钮
createForm:function(){
var that =this;
var items = [];
for (var i = 0; i < this.headers.length; i++) {
var header = this.headers[i];
var f = this.fields[i];
var type = this.fieldType[i] || 'textfield';
// 构造json对象
items.push({
fieldLabel: header,
name: f,
xtype:type
});
}
// 进行保存
var form = new Ext.form.FormPanel({
frame: true,
defaultType: "textfield",
buttonAlign: "center",
labelAlign: "right",
labelWidth: 70,
items: items,
buttons: [
{
text: "提交",
handler: function () {
// 指向当前的对象
that.submitRecord();
}
}, {
text: "重置",
handler: function () {
form.getForm().reset();
}
}]
});
return form;
},
showWindows: function () {
this.getWindow().show();
},
hideWindow:function(){
this.getWindow().hide();
},
getWindow:function(){
if (!this.gridWindow) {
this.gridWindow = this.createWindow();
}
return this.gridWindow;
},
createWindow: function () {
var formPanel = this.getFormPanel();
var win = new Ext.Window({
title: "表单",
// width: eval("this.subFormConfig." + this.Action + ".width"),
autoHeight: true,
closeAction: "hide",
modal: true,
items: [formPanel]
});
return win;
}
});