ext+dwr DynamicGridPanel 封装 态创建ext grid
封装一个动态grid 继承Ext.grid.GridPanel
1.一般只需定义gridcolumns属性即可动态生成grid ，支持各列renderer自定义，
支持store自定义. 其中默认的store,用的是dwrproxy,dwr函数前三个默认参数为(qname,start,pagesize)其他参数在这三个参数之后，
通过DWRfuncParams属性传入。
2.需dwr。
约定:root为data, totalProperty为totalSize
- Ext.namespace("Ext.ux.grid");
- /**
- * @class Ext.ux.grid.DynamicGridPanel
- * @extends Ext.grid.GridPanel
- * @author wujuncheng
- * @constructor
- * @param {Object} config A configuration object.
- */
- /**
- * demo:
- * var demoManage = {
- return {
- init1:function(){
- //grid 列表头及列表头属性，用于数据映射和表头相关属性定义
- var gridcolumns =[
- {dataIndex: 'arArticleId', header:'arArticleId1',width:200,hidden:false,renderer:demoManage.toArticleRenderer},
- {dataIndex: 'arShort',header:'arShort2',width:200,hidden:false},
- {dataIndex: 'arIscommend', header:'arIscommend3',width:200,hidden:false},
- {dataIndex: 'arIshot',header:'arIshot4',width:200,hidden:false},
- {dataIndex: 'arIstop',header:'arIstop5',width:200,hidden:false},
- {dataIndex: 'arHits',header:'arHits6',width:200,hidden:false},
- {dataIndex: 'arStatus',header:'arStatus7',width:200,hidden:false},
- {dataIndex: 'arCreatetime',header:'arCreatetime8',width:200,hidden:false}
- ]
- //grid 的配置属性 大部分属性按默认即可，一般只需定义gridcolumns属性
- this.datagrid = new Ext.ux.grid.DynamicGridPanel({
- // store:this.store(), //自定store 用法
- gridcolumns:gridcolumns,
- DWRfuncParams:[],
- DWRfunc:demoManageAction.getArticles
- });
- this.datagrid.loadData();
- },
- toArticle:function (articleId){
- var url = "articleUpdate.jsp?arArticleId="+articleId;
- window.location.href=url;
- },
- toArticleRenderer:function (articleId){
- return "<a href='#' class='' onclick='demoManage.toArticle(\""+articleId+"\")'>修改</a>"
- },
- store:function(){
- storepage = this;
- return new Ext.data.GroupingStore({
- proxy:new Ext.cheping.data.DWRProxy({
- dwrFunction: this.Action.getArticles,
- listeners: {
- 'beforeload': function(dataProxy, params){
- // storepage.storeParams = storepage.setStoreParams(params.start);
- var loadArgs = [
- params.query,
- params.start,
- storepage.defaultPageSize,
- ];
- params[dataProxy.loadArgsKey] = loadArgs;
- }
- }
- })
- sortInfo:{field: 'fielname', direction: "ASC"}, //使用GroupingStore时必须指定sortInfo信息
- });
- },
- };
- }
- */
- Ext.ux.grid.DynamicGridPanel=Ext.extend(Ext.grid.GridPanel, {
- enableChecked:true, //是否有CheckBox。
- singleSelect: true,
- width:'auto',
- height:document.body.clientHeight, //高度
- iconCls :'icon-grid',
- stripeRows: true,
- collapsible: true,
- loadMask: true,
- animCollapse: false,
- DWRfuncParams:[],
- DynamicGridPanel_fields:[],
- DynamicGridPanel_columns:[],
- hiddenDefaultTbar:true,
- GroupingViewConfig:{
- markDirty: false,
- forceFit:false,
- sortAscText :'正序',
- sortDescText :'倒序',
- columnsText:'列显示/隐藏',
- groupByText:'依本列分组',
- showGroupsText:'分组显示',
- groupTextTpl: '{text} ({[values.rs.length]} 条记录)'
- },
- //private
- initComponent: function(){
- this.initDynamicGridPanelFields();
- this.initDynamicGridPanelStore();
- this.DynamicGridPanel_bbar();
- Ext.ux.grid.DynamicGridPanel.superclass.initComponent.call(this);
- this.iniDynamicGridPanelGrid();
- this.initDynamicGridPanel_cm_tbr();
- this.view= new Ext.grid.GroupingView(this.GroupingViewConfig)
- },
- pagingConfig:{
- pageSize:20,
- store: this.store,
- displayInfo:true,
- plugins: [new Ext.ux.PageSizePlugin()],
- displayMsg: "当前记录:{0} - {1} 条 总共{2} 条",
- emptyMsg: "<b>0</b> 条记录"
- },
- //private
- iniDynamicGridPanelGrid:function(){
- this.DynamicGridPanelstoreParams = this.setDynamicGridPanelStoreParams(0);
- if(this.container){
- this.width = Ext.get(this.container).getComputedWidth(); //宽度
- this.renderTo=Ext.get(this.container);
- }
- },
- //private
- initDynamicGridPanelStore:function(){
- if(this.store){
- this.store.reader=this.DynamicGridPanel_reader();
- }else{
- this.store= this.DynamicGridPanel_store();
- }
- this.pagingConfig.store = this.store;
- this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});
- },
- //private
- initDynamicGridPanel_cm_tbr:function(){
- if(!this.cm)
- if(!this.colModel)
- this.colModel=this.DynamicGridPanel_cm();
- if(!this.hiddenDefaultTbar)
- this.tbar=this.DynamicGridPanel_ToolBar();
- },
- setDynamicGridPanelStoreParams:function(start){
- var Params = { params: { start:start} };
- return Params;
- },
- //private
- initDynamicGridPanelFields:function(){
- for (var i = 0; i < this.gridcolumns.length; i++) {
- this.DynamicGridPanel_fields.push({name:this.gridcolumns[i].dataIndex});
- this.DynamicGridPanel_columns.push(this.gridcolumns[i]);
- }
- },
- //private
- DynamicGridPanel_cm:function(){
- if (this.enableChecked) {
- this.DynamicGridPanel_sm = new Ext.grid.CheckboxSelectionModel({ singleSelect: this.singleSelect, moveEditorOnEnter: true, sortable: false });
- var arr = [this.DynamicGridPanel_sm];
- arr.push(new Ext.grid.RowNumberer({header:'序号',width:40}))
- var sunfish = this.DynamicGridPanel_columns;
- for (var i = 0; i < sunfish.length; i++) {
- arr.push(sunfish[i]);
- }
- }
- else {
- // arr = eval('([' + this.columns + '])');
- arr = this.DynamicGridPanel_columns;
- }
- var col = new Ext.grid.ColumnModel(arr);
- col.defaultSortable = true;
- return col;
- },
- //private
- DynamicGridPanel_store:function(){
- var DynamicGridPanelStoreParams = this;
- return new Ext.data.GroupingStore({
- proxy:new Ext.cheping.data.DWRProxy({
- dwrFunction: DynamicGridPanelStoreParams.DWRfunc,
- listeners: {
- 'beforeload': function(dataProxy, params){
- DynamicGridPanelStoreParams.DynamicGridPanelstoreParams = DynamicGridPanelStoreParams.setDynamicGridPanelStoreParams(params.start);
- var loadArgs = [
- params.qname,
- params.start,
- DynamicGridPanelStoreParams.pagingConfig.pageSize
- ];
- if(DynamicGridPanelStoreParams.DWRfuncParams.length>0){
- for(var i=0;i<DynamicGridPanelStoreParams.DWRfuncParams.length;i++){
- loadArgs[loadArgs.length]=DynamicGridPanelStoreParams.DWRfuncParams[i];
- }
- }
- params[dataProxy.loadArgsKey] = loadArgs;
- }
- }
- }),
- //------------------------------------------------------------------------------------------------ //分组表所需
- // groupField:this.DynamicGridPanel_fields[0],
- // groupOnSort:true,
- sortInfo:{field: this.gridcolumns[0].dataIndex, direction: "ASC"}, //使用GroupingStore时必须指定sortInfo信息
- //------------------------------------------------------------------------------------------------
- reader: this.DynamicGridPanel_reader()
- });
- },
- //private
- DynamicGridPanel_reader:function(){
- return new Ext.data.JsonReader({
- totalProperty: "totalSize",
- root: "data",
- fields:this.DynamicGridPanel_fields
- });
- },
- //private
- DynamicGridPanel_bbar:function(){
- this.bbar = new Ext.PagingToolbar(this.pagingConfig);
- },
- DynamicGridPanel_ToolBar:function(){
- return new Ext.Toolbar(
- {
- hidden:this.hiddenDefaultTbar,
- items:[
- '->','关键字: ',
- this.DynamicGridPanel_Search()
- ]
- }
- );
- },
- DynamicGridPanel_Search:function(){
- return srch = new Ext.app.SearchField({
- store: this.store,
- width:220,
- paramName : 'qname',
- Align:'right'
- });
- },
- loadData:function() {
- this.getStore().load(this.DynamicGridPanelstoreParams);
- },
- getInsertRecord:function(){
- var obj={};
- for(var i=0;i<this.DynamicGridPanel_fields.length;i++){
- obj[this.DynamicGridPanel_fields[i].name]=null;
- }
- var record = Ext.data.Record.create(this.DynamicGridPanel_fields);
- var InsertRecord = new record(obj);
- return InsertRecord;
- },
- getSelectionObjsByName:function(dataName) {
- if(this.getSelectionModel().getCount()<1){
- Ext.MessageBox.alert('提示', '请选择数据,可以是多选！');
- return;
- }else{
- var getSelectionRecordsrList=[];
- for(var i=0; i<this.getSelectionModel().getSelections().length;i++){
- if(null!=this.getSelectionModel().getSelections()[i].data[dataName]
- && ""!=this.getSelectionModel().getSelections()[i].data[dataName].trim())
- getSelectionRecordsrList.push(this.getSelectionModel().getSelections()[i].data[dataName]);
- }
- return getSelectionRecordsrList;
- }
- },
- getSelectionObjByName:function(dataName) {
- if(this.getSelectionModel().getCount()==1){
- return this.getSelectionModel().getSelections()[0].data[dataName];
- }else{
- Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');
- return;
- }
- },
- getSelectedObj:function() {
- if(this.getSelectionModel().getCount()==1){
- return this.getSelectionModel().getSelections()[0].data;
- }else{
- Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');
- return;
- }
- },
- getFormRecord:function() {
- if(this.getSelectionModel().getCount()==1){
- return this.getSelectionModel().getSelections()[0];
- }else{
- Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');
- return;
- }
- }
- });
* @class Ext.ux.grid.DynamicGridPanel
* @extends Ext.grid.GridPanel
* @author wujuncheng
* @constructor
* @param {Object} config A configuration object.
*/
/**
* demo:
* var demoManage = {
return {
init1:function(){
//grid
var gridcolumns =[
{dataIndex: 'arArticleId', header:'arArticleId1',width:200,hidden:false,renderer:demoManage.toArticleRenderer},
{dataIndex: 'arShort',header:'arShort2',width:200,hidden:false},
{dataIndex: 'arIscommend', header:'arIscommend3',width:200,hidden:false},
{dataIndex: 'arIshot',header:'arIshot4',width:200,hidden:false},
{dataIndex: 'arIstop',header:'arIstop5',width:200,hidden:false},
{dataIndex: 'arHits',header:'arHits6',width:200,hidden:false},
{dataIndex: 'arStatus',header:'arStatus7',width:200,hidden:false},
{dataIndex: 'arCreatetime',header:'arCreatetime8',width:200,hidden:false}
]
//grid 属性
this.datagrid = new Ext.ux.grid.DynamicGridPanel({
store:this.store(), //用法
gridcolumns:gridcolumns,
DWRfuncParams:[],
DWRfunc:demoManageAction.getArticles
});
this.datagrid.loadData();
},
toArticle:function (articleId){
var url = "articleUpdate.jsp?arArticleId="+articleId;
window.location.href=url;
},
toArticleRenderer:function (articleId){
return "<a href='#' class='' onclick='demoManage.toArticle(\""+articleId+"\")'>
},
store:function(){
storepage = this;
return new Ext.data.GroupingStore({
proxy:new Ext.cheping.data.DWRProxy({
dwrFunction: this.Action.getArticles,
listeners: {
'beforeload': function(dataProxy, params){
storepage.storeParams = storepage.setStoreParams(params.start);
var loadArgs = [
params.query,
params.start,
storepage.defaultPageSize,
];
params[dataProxy.loadArgsKey] = loadArgs;
}
}
})
sortInfo:{field: 'fielname', direction: "ASC"}, //时必须指定sortInfo信息
});
},
};
}
*/
Ext.ux.grid.DynamicGridPanel=Ext.extend(Ext.grid.GridPanel, {
enableChecked:true, //。
singleSelect: true,
width:'auto',
height:document.body.clientHeight, //
iconCls :'icon-grid',
stripeRows: true,
collapsible: true,
loadMask: true,
animCollapse: false,
DWRfuncParams:[],
DynamicGridPanel_fields:[],
DynamicGridPanel_columns:[],
hiddenDefaultTbar:true,
GroupingViewConfig:{
markDirty: false,
forceFit:false,
sortAscText :'
sortDescText :'
columnsText:'隐藏',
groupByText:'
showGroupsText:'
groupTextTpl: '{text} ({[values.rs.length]}
},
//private
initComponent: function(){
this.initDynamicGridPanelFields();
this.initDynamicGridPanelStore();
this.DynamicGridPanel_bbar();
Ext.ux.grid.DynamicGridPanel.superclass.initComponent.call(this);
this.iniDynamicGridPanelGrid();
this.initDynamicGridPanel_cm_tbr();
this.view= new Ext.grid.GroupingView(this.GroupingViewConfig)
},
pagingConfig:{
pageSize:20,
store: this.store,
displayInfo:true,
plugins: [new Ext.ux.PageSizePlugin()],
displayMsg: "条 总共{2} 条",
emptyMsg: "<b>0</b>
},
//private
iniDynamicGridPanelGrid:function(){
this.DynamicGridPanelstoreParams = this.setDynamicGridPanelStoreParams(0);
if(this.container){
this.width = Ext.get(this.container).getComputedWidth(); //
this.renderTo=Ext.get(this.container);
}
},
//private
initDynamicGridPanelStore:function(){
if(this.store){
this.store.reader=this.DynamicGridPanel_reader();
}else{
this.store= this.DynamicGridPanel_store();
}
this.pagingConfig.store = this.store;
this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});
},
//private
initDynamicGridPanel_cm_tbr:function(){
if(!this.cm)
if(!this.colModel)
this.colModel=this.DynamicGridPanel_cm();
if(!this.hiddenDefaultTbar)
this.tbar=this.DynamicGridPanel_ToolBar();
},
setDynamicGridPanelStoreParams:function(start){
var Params = { params: { start:start} };
return Params;
},
//private
initDynamicGridPanelFields:function(){
for (var i = 0; i < this.gridcolumns.length; i++) {
this.DynamicGridPanel_fields.push({name:this.gridcolumns[i].dataIndex});
this.DynamicGridPanel_columns.push(this.gridcolumns[i]);
}
},
//private
DynamicGridPanel_cm:function(){
if (this.enableChecked) {
this.DynamicGridPanel_sm = new Ext.grid.CheckboxSelectionModel({ singleSelect: this.singleSelect, moveEditorOnEnter: true, sortable: false });
var arr = [this.DynamicGridPanel_sm];
arr.push(new Ext.grid.RowNumberer({header:'
var sunfish = this.DynamicGridPanel_columns;
for (var i = 0; i < sunfish.length; i++) {
arr.push(sunfish[i]);
}
}
else {
// arr = eval('([' + this.columns + '])');
arr = this.DynamicGridPanel_columns;
}
var col = new Ext.grid.ColumnModel(arr);
col.defaultSortable = true;
return col;
},
//private
DynamicGridPanel_store:function(){
var DynamicGridPanelStoreParams = this;
return new Ext.data.GroupingStore({
proxy:new Ext.cheping.data.DWRProxy({
dwrFunction: DynamicGridPanelStoreParams.DWRfunc,
listeners: {
'beforeload': function(dataProxy, params){
DynamicGridPanelStoreParams.DynamicGridPanelstoreParams = DynamicGridPanelStoreParams.setDynamicGridPanelStoreParams(params.start);
var loadArgs = [
params.qname,
params.start,
DynamicGridPanelStoreParams.pagingConfig.pageSize
];
if(DynamicGridPanelStoreParams.DWRfuncParams.length>0){
for(var i=0;i<DynamicGridPanelStoreParams.DWRfuncParams.length;i++){
loadArgs[loadArgs.length]=DynamicGridPanelStoreParams.DWRfuncParams[i];
}
}
params[dataProxy.loadArgsKey] = loadArgs;
}
}
}),
groupField:this.DynamicGridPanel_fields[0],
groupOnSort:true,
sortInfo:{field: this.gridcolumns[0].dataIndex, direction: "ASC"}, //时必须指定sortInfo信息
reader: this.DynamicGridPanel_reader()
});
},
//private
DynamicGridPanel_reader:function(){
return new Ext.data.JsonReader({
totalProperty: "totalSize",
root: "data",
fields:this.DynamicGridPanel_fields
});
},
//private
DynamicGridPanel_bbar:function(){
this.bbar = new Ext.PagingToolbar(this.pagingConfig);
},
DynamicGridPanel_ToolBar:function(){
return new Ext.Toolbar(
{
hidden:this.hiddenDefaultTbar,
items:[
'->','
this.DynamicGridPanel_Search()
]
}
);
},
DynamicGridPanel_Search:function(){
return srch = new Ext.app.SearchField({
store: this.store,
width:220,
paramName : 'qname',
Align:'right'
});
},
loadData:function() {
this.getStore().load(this.DynamicGridPanelstoreParams);
},
getInsertRecord:function(){
var obj={};
for(var i=0;i<this.DynamicGridPanel_fields.length;i++){
obj[this.DynamicGridPanel_fields[i].name]=null;
}
var record = Ext.data.Record.create(this.DynamicGridPanel_fields);
var InsertRecord = new record(obj);
return InsertRecord;
},
getSelectionObjsByName:function(dataName) {
if(this.getSelectionModel().getCount()<1){
Ext.MessageBox.alert('请选择数据,可以是多选！');
return;
}else{
var getSelectionRecordsrList=[];
for(var i=0; i<this.getSelectionModel().getSelections().length;i++){
if(null!=this.getSelectionModel().getSelections()[i].data[dataName]
&& ""!=this.getSelectionModel().getSelections()[i].data[dataName].trim())
getSelectionRecordsrList.push(this.getSelectionModel().getSelections()[i].data[dataName]);
}
return getSelectionRecordsrList;
}
},
getSelectionObjByName:function(dataName) {
if(this.getSelectionModel().getCount()==1){
return this.getSelectionModel().getSelections()[0].data[dataName];
}else{
Ext.MessageBox.alert('请选择数据,并且只能选一条！');
return;
}
},
getSelectedObj:function() {
if(this.getSelectionModel().getCount()==1){
return this.getSelectionModel().getSelections()[0].data;
}else{
Ext.MessageBox.alert('请选择数据,并且只能选一条！');
return;
}
},
getFormRecord:function() {
if(this.getSelectionModel().getCount()==1){
return this.getSelectionModel().getSelections()[0];
}else{
Ext.MessageBox.alert('请选择数据,并且只能选一条！');
return;
}
}
- public Map extFind(final String hql,final int start,final int pagesize) {
- List temp = this.getHibernateTemplate().find(getCounthql(hql));
- long totalSize = temp!=null&&temp.size()>0?Long.parseLong(temp.get(0)+""):0L;
- //long totalSize = ((Long)this.getHibernateTemplate().find(counthql).iterator().next()).longValue();
- List lst = getHibernateTemplate().executeFind( new HibernateCallback() {
- public Object doInHibernate(Session s) throws HibernateException, SQLException {
- Query query = s.createQuery(hql);
- query.setFirstResult(start);
- query.setMaxResults(pagesize);
- List list = query.list();
- return list;
- }
- });
- HashMap map = new HashMap();
- map.put("totalSize", totalSize);
- map.put("data", lst);
- return map;
- }