前两天用到extjs中的插件Ext.grid.RowExpander,但是我的代码都是继承vifir网站中提供的EasyJF.Ext.CrudPanel,这个累提供的常用的增删改查的操作,我们这里写入我们相关的表单信息就可以,如:
EasyJF.Ext.CrudPanel的代码:
EasyJF.Ext.CrudPanel=Ext.extend(Ext.Panel,{
closable: true, //关闭
autoScroll:true, //自动显示工具条
layout:"fit", //
gridViewConfig:{},
linkRenderer:function(v)
{
if(!v)return "";
else return String.format("{0}",v);
},
search:function()
{
this.refresh();
},
refresh:function()
{
this.store.removeAll();
this.store.reload();
},
initWin:function(width,height,title)
{
var win=new Ext.Window({
width:width,
height:height,
buttonAlign:"center",
title:title,
modal:true,
shadow:true,
closeAction:"hide",
items:[this.fp],
buttons:[{text:"保存",
handler:this.save,
scope:this},
{text:"清空",
handler:this.reset,
scope:this},
{text:"取消",
handler:this.closeWin,
scope:this}
]
});
return win;
},
showWin:function()
{
if(!this.win){
if(!this.fp){
this.fp=this.createForm();
}
this.win=this.createWin();
this.win.on("close",function(){this.win=null;this.fp=null;},this);
}
this.win.show();
},
create:function()
{
this.showWin();
this.reset();
},
save:function()
{
var id=this.fp.form.findField("id").getValue();
this.fp.form.submit({
waitMsg:'正在保存。。。',
url:this.baseUrl+"?cmd="+(id?"update":"save"),
method:'POST',
success:function(){
this.closeWin();
this.store.reload();
},
scope:this
});
},
reset:function()
{
if(this.win)this.fp.form.reset();
},
closeWin:function()
{
if(this.win)this.win.close();
this.win=null;
this.fp=null;
},
edit:function()
{
var record=this.grid.getSelectionModel().getSelected();
if(!record){
Ext.Msg.alert("提示","请先选择要编辑的行!");
return;
}
var id=record.get("id");
this.showWin();
this.fp.form.loadRecord(record);
},
removeData:function()
{
var record=this.grid.getSelectionModel().getSelected();
if(!record){
Ext.Msg.alert("提示","请先选择要编辑的行!");
return;
}
var m=Ext.MessageBox.confirm("删除提示","是否真的要删除数据？",function(ret){
if(ret=="yes"){
Ext.Ajax.request({
url:this.baseUrl+'?cmd=remove',
params:{
'id':record.get("id")
},
method:'POST',
success:function(response){
var r=Ext.decode(response.responseText);
if(!r.success)Ext.Msg.alert("提示信息","数据删除失败，由以下原因所致：
"+(r.errors.msg?r.errors.msg:"未知原因"));
else{
Ext.Msg.alert("提示信息","成功删除数据!",function(){
this.store.reload();
},this);
}
},
scope:this
});
}},this);
},
initComponent : function(){
this.store=new Ext.data.JsonStore({
id:"id",
url: this.baseUrl+'?cmd=list',
root:"result",
totalProperty:"rowCount",
remoteSort:true,
fields:this.storeMapping});
this.store.paramNames.sort="orderBy";
this.store.paramNames.dir="orderType";
this.cm.defaultSortable=true;
EasyJF.Ext.CrudPanel.superclass.initComponent.call(this);
var viewConfig=Ext.apply({forceFit:true},this.gridViewConfig);
this.grid=new Ext.grid.GridPanel({
store: this.store,
cm: this.cm,
trackMouseOver:false,
loadMask: true,
viewConfig:viewConfig,
tbar: [' ',
{
text: '添加',
pressed: true,
handler: this.create,
scope:this
},' ',
{
text: '修改',
pressed: true,
handler: this.edit,
scope:this
},' ',
{
text: '删除',
pressed: true,
handler: this.removeData,
scope:this
},' ',
{
text: '刷新',
pressed: true,
handler: this.refresh,
scope:this
}
,new Ext.Toolbar.Fill(),
'Search: ',
{
xtype:"textfield",
width:100,
pressed: true,
scope:this
},
{
text: '查询',
pressed: true,
handler: this.search,
scope:this
},' '
],
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: this.store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
this.grid.on("celldblclick",this.edit,this);
this.add(this.grid);
this.store.load();
}
})
如果我们想做个增删改查的操作,例如我们在项目中常用到的友情链接,下面的代码就是这样写了:
LinkPanel=Ext.extend(EasyJF.Ext.CrudPanel,{
id:"linkPanel",
title:"友情链接管理",
baseUrl:"link.ejf",
createForm:function(){
var formPanel=new Ext.form.FormPanel({
frame:true,
labelWidth:50,
labelAlign:'right',
defaults:{width:340,xtype:"textfield"},
items:[{xtype:"hidden",name:"id"},
{fieldLabel:'标题',name:'title'},
{fieldLabel:'URL',name:'url'},
{fieldLabel:'RSS',name:'rss'},
{xtype:"textarea",fieldLabel:'简介',name:'intro'}
]
});
return formPanel;
},
createWin:function()
{
return this.initWin(438,220,"友情链接管理");
},
storeMapping:["id","title","url","rss","intro"],
initComponent : function(){
this.cm=new Ext.grid.ColumnModel([
{header: "标题", sortable:true,width: 300, dataIndex:"title"},
{header: "URL", sortable:true,width: 300, dataIndex:"url",renderer:this.linkRenderer},
{header: "RSS", sortable:true,width: 300, dataIndex:"rss",renderer:this.linkRenderer},
{header: "简介", sortable:true,width: 300, dataIndex:"intro"}
])
LinkPanel.superclass.initComponent.call(this);
}
});
呵呵。就这么简单了！我们的一个友情连接的管理就实现了。
如果我们做一个这样的功能：
我们需要用到Ext.grid.RowExpander，这个时候我们看到Ext.grid.RowExpander是需要放在Ext.grid.GridPanel下面的plugins
中，但是我使用了继承EasyJF.Ext.CrudPanel,在子类中我们没有办法把plugins赋值给CrudPanel，这时候我们需要重新来构造父类，在父类中定义一个属性在子类里面实现，如我们在父类中plugins:this.expander,那么我们在子类中就需要定
expander: new Ext.grid.RowExpander({
tpl : new Ext.Template(
'标题: {title}
',
'简介: {content}
'
)
}),
这样就可以实现以上的功能了，我们在
tpl : new Ext.Template(
'标题: {title}
',
'简介: {content}
'
中可以定义自己的样式来显示我们内容。
