extjs 表格 搜索 快速开发 轻量级框架

标题/article/5624396.html

1 /**
* 表格框架
* buttons:自定义按钮配置
* grid : 表格配置
*         height: 表格最小高度
* search :  搜索框信息配置
*         size: 搜索框列数
*         conf:搜索框内容配置
* page : 分页查询信息配置
*         pageSize: 分页查询单页数量
* loadUrl : 表格加载的URL(必填)
* viewConfig : 参考extjs,
* cms:参考extjs
* qtip :浮动显示列详情
*/
TGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
constructor : function(config) {
var self = this;
self.config = config;
var cms = config.cms;
var page = config.page;
config.grid = config.grid || {};
var fields = [];
var localcms = [];
for(var j = 0;j < cms.length;j++){
var cm = cms[j];
localcms.push({
dataIndex : cm.dataIndex,
header : cm.header,
width : cm.width,
fixed : cm.fixed,
vtype : cm.vtype,
sortable : cm.sortable,
hidden : cm.hidden || false,
renderer : cm.renderer || (/*cm.qtip&&*/function(v, metadata, record, rowIndex, columnIndex, store){
if(v == null){return "";}
metadata.attr = ' ext:qtip="' + (v||"") + '"';
return v;
})
});
fields.push(cm.dataIndex);
if(config.edit == null)continue;
var compo = T.instanceComponent({allowBlank : cm.allowBlank,fieldName : cm.fieldName,xtype : cm.xtype ,vtype : cm.vtype , type : cm.type,id : cm.id,valueField : cm.valueField,defaulValue : cm.defaulValue});
localcms[j]['editor'] = compo[0];
localcms[j]['renderer'] = compo[1];
}

var checkSM = new Ext.grid.CheckboxSelectionModel({checkOnly : true,singleSelect : false,moveEditorOnEnter : true});
localcms.unshift(checkSM);

var jsonstore = new JSONSTORE({
url : config.loadUrl,
prompt : true,
waitMsg : true,
root : 'data',
fields : fields,
listeners : (config.grid.cacheSelected == true)? Ext.apply({'beforeload' : function(){
/*var records = self.getSelectionModel().selections.items;
if(records.length != 0){
Ext.Msg.confirm(MSG.MESSAGE,MSG.SAVESELECTED,function(_btn){
if(_btn=='yes'){
self.selectItems = self.selectItems || [];//初始化
self.selectItems = self.selectItems.concat(records);
}
else{
self.selectItems = [];
}
})
}*/
}},config.listeners):config.listeners
});

self.pagingToolbar = new PAGINGTOOLBAR({
store : jsonstore,
pageSize : page.pageSize,
listeners : page.listeners
});
//设置默认排序
if(config.sortInfo != null){
jsonstore.setDefaultSort(config.sortInfo.fieldName,config.sortInfo.dir);
}
Ext.apply(jsonstore.baseParams,{limit:page.pageSize,start:0});
if(config.autoLoad == true){
jsonstore.load();
}
self.init();
TGridPanel.superclass.constructor.call(this, {
tbar : (self.config.page.items.length == 0)?{hidden : false}:self.config.page.items,
layout : "fit",
plain:true,
boxMinHeight : self.config.grid&&self.config.grid.height,
autoScroll : true,
enableColumnMove : false,
iconCls : 'icon-grid',
viewConfig : self.config.viewConfig || {forceFit : true,scrollOffset : 0},
cm : new Ext.grid.ColumnModel(localcms),
sm : checkSM,
//boxMinHeight:510,
stripeRows : true,//斑马线
clicksToEdit : 1,//单击可编
bbar : self.pagingToolbar,
store : jsonstore
});
},
getSelectItems : function(){
return this.selectItems;
},
init:function(){
var self = this;
var add = self.config.add;
var items = [];
if(add){
items.push({
text: "新增",
handler: function (arg1, arg2, arg3, arg4) {
var Record = self.getStore().recordType;
var r = new Record({});
self.stopEditing();
self.getStore().insert(0, r);
self.startEditing(0, 0);
}});
}
var del = self.config.del;
if(del){
items.push({
text: "删除",
handler: function (arg1, arg2, arg3, arg4) {
alert('删除');
}});
}
var save = self.config.save;
if(save){
items.push({
text: "保存",
handler: function (arg1, arg2, arg3, arg4) {
alert('保存');
}});
}
var _export = self.config.expot;
if(_export){
items.push({
text: "导出",
handler: function (arg1, arg2, arg3, arg4) {
alert('导出');
}});
}
self.config.page.items = items.concat(self.config.page.items);
}
});
SearchFormPanel = Ext.extend(Ext.Panel , {
constructor:function(config){
if(config.page == null){alert("page can not be null!");}
if(config.loadUrl == null){alert("loadUrl can not be null!");}

var self = this;
self.config = config;
self.localitems = [];
//默认值
if(self.config.grid == undefined){self.config.grid = {};}
if(config.search){
self.initSearch();
}
self.config.page.items = self.config.page.items||[];
for(var i = 0; config.buttons != null && i < config.buttons.length; i++){
(function(bt){
self.config.page.items.push({xtype:bt.xtype||'button',html:bt.html,iconCls :bt.iconCls,name:bt.name,text:bt.text,handler:function(){
bt.handler.call(self);
}});
})(config.buttons[i]);
}
this.gridPanel = new TGridPanel(config);
if(config.search){
self.gridPanel.getStore().on("beforeload",function(){
if((self.searchFields == null)&&(config.autoLoad != true)){
var searchFields = self.searchPanel.getForm().getFieldValues();
if(self.filterFields(searchFields) == false){
$('#loading').hide();
return false;
};
return true;
}
});
}
SearchFormPanel.superclass.constructor.call(this,{
labelAlign : 'left',
layout:'form',
plain : true,
boxMinWidth:900,
border:false,
autoScroll:false,
frame : true,
autoHeight :true,
items :[this.searchPanel,this.gridPanel],
listeners:{
afterlayout:function(){
//if(this.config.grid.height == undefined){
if(Ext.isIE6 != true){
this.gridPanel.setHeight(this.ownerCt.getHeight() - this.searchPanel.getHeight()-15);
}
else{
this.gridPanel.setHeight(this.ownerCt.getHeight() - this.searchPanel.getHeight()-35);
}
//}
},
scope : self
}
});

},
filterFields : function(searchFields){
LOG.info("method=filterFields()");
for(var field in searchFields){
var fledvalue = searchFields[field];
if(Ext.isEmpty(fledvalue)){//删除空字符串
delete searchFields[field];
}
else if(Ext.isDate(fledvalue)){//转义日期类型
searchFields[field] = fledvalue.format(CONSTANT.DATE.FORMAT6);
}
}
if($.isEmptyObject(searchFields)&&(this.config.autoLoad!=true)){
Ext.ux.Toast.msg(MSG.MESSAGE,MSG.SEARCHNONE);
return false;
}
return true;
},
initSearch : function(_searchcfg){
LOG.info("method=initSearch();");
var self = this;
var search;
if(_searchcfg == null){
search = self.config.search;
self.searchButton = {text : '搜索',handler : search.handler || function(){
//                if(!self.searchPanel.getForm().isValid()){
//                    COMMSG.validatefail();
//                    return false;
//                }

var store = self.gridPanel.getStore();
var searchFields = self.searchPanel.getForm().getFieldValues();
if(self.searchFields != null){//清除上次搜索关键字缓存
for(var key in self.searchFields){
delete store.baseParams[key];
}
}
if(self.filterFields(searchFields) == false)return;

self.searchFields = searchFields;
Ext.apply(store.baseParams, searchFields);

store.load();
}};
}
else{
this.searchPanel.removeAll();
self.config.search.conf = _searchcfg;
search = self.config.search;
}
var    searchcfg = search.conf;
var columnItems = [];
var size = search.size||3;
for(var i = 0;i < searchcfg.length;i++){
var field = searchcfg[i];
columnItems[i%size] = columnItems[i%size]||[];
columnItems[i%size].push(T.instanceComponent({
fieldLabel : field.fieldLabel,
fieldName : field.fieldName,
xtype : field.xtype,
vtype : field.vtype,
className : field.className,
type : field.type,
pageSize:field.pageSize,
listeners: field.listeners,
readOnly:field.readOnly,
allowBlank:field.allowBlank == undefined ? true : field.allowBlank,
valueField : field.valueField,
width : 200,
defaulValue : field.defaulValue
})[0]);
}
var searchItems = { layout:'column'};
for(var i = 0;i < size;i++){
searchItems['items'] = searchItems['items'] || [];
searchItems['items'].push({
columnWidth : (1/size),
border:false,
layout:'form',
labelAlign : 'right',
labelWidth : 85,
items : columnItems[i]
});
}
if(_searchcfg == null){
this.searchPanel = new Ext.form.FormPanel({
items : searchItems,
buttonAlign:'center',
//collapsible:true,
autoScroll:true,
buttons : [self.searchButton]/* ,
listeners:{
collapse:function(){
self.doLayout();
},
expand :function(){
self.doLayout();
}
}*/
});
}
else{
this.searchPanel.add(searchItems);
}
}
});
/*(function(){
var config = {
loadUrl : 'query/data.action',//加载url
del : {delurl : 'query/data.action'},//删除url
//edit : {editurl : 'query/data.action'},//修改url
save : {addurl : 'query/data.action'},
add : {},
page : {},
edit:{},
search : {size : 4,conf:[{fieldName:'js',fieldLabel:'姓名'},{fieldLabel:'主键',fieldName:'cls'},{fieldLabel:'是否叶子',fieldName :' leaf'},
{fieldLabel:'是否叶子',fieldName :' leaf'},{fieldLabel:'是否叶子',fieldName :' leaf'}]},
//tbar : ,//查询条
cms : [{dataIndex : 'js',header : '姓名'},
{dataIndex : 'cls',header : '主键',xtype : 'datefield'},
{dataIndex : 'leaf',header : '是否叶子',xtype : 'checkbox'}]};
new SearchFormPanel(config).show();
})()*/