我为我狂
EASYJF的狂人
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>Ext.grid.RowExpander的应用
Ext.grid.RowExpander的应用
    作者:我为我狂 来源: 发表时间:2008-06-30

 
 

         前两天用到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}

'

中可以定义自己的样式来显示我们内容。

 
 

(阅读 )   评论数(:10)
评论】 【收藏】
评论:共10条
<script type="text/javascript" src="ext/RowExpander.js"></script>

一定记得导入js数据包!!!
评论人: 匿名用户     评论时间: 2009-09-09 16:58:23
Apparently this is what the etseemed Willis was talkin' 'bout.
评论人: ZZzmAojT     评论时间: 2011-10-05 03:08:21
M9z59i  <a href="http://mvmuramzlqlg.com/">mvmuramzlqlg</a>
评论人: JGezmxGVpNOLC     评论时间: 2011-10-05 16:38:36
SKxDjT , [url=http://umkzmvymaklq.com/]umkzmvymaklq[/url], [link=http://vxozhjqcpvsa.com/]vxozhjqcpvsa[/link], http://yquajkimsday.com/
评论人: XofNwReCwfqhd     评论时间: 2011-10-05 22:36:58
7bvW9R  <a href="http://fjmmnstwxmdi.com/">fjmmnstwxmdi</a>
评论人: OEKflGrqoMrjlrkpTcB     评论时间: 2011-10-08 00:10:20
RKMvja , [url=http://czmlhqvtpomq.com/]czmlhqvtpomq[/url], [link=http://gioeikmwbxav.com/]gioeikmwbxav[/link], http://uuguejgeicnp.com/
评论人: YnYqaSFE     评论时间: 2011-10-09 00:08:58
I'm so glad that the inetnret allows free info like this!
评论人: CCpPoRHQcls     评论时间: 2013-05-23 16:05:16
yTjrAp  <a href="http://twpszbhmovzp.com/">twpszbhmovzp</a>
评论人: XGhYkmFMIhJLAe     评论时间: 2013-05-24 21:13:03
EiUDJq , [url=http://bjpadwsptmyf.com/]bjpadwsptmyf[/url], [link=http://gzaroouhmxws.com/]gzaroouhmxws[/link], http://zerhcnqbdofy.com/
评论人: vddHBvQGqsgn     评论时间: 2013-05-25 01:35:40
QQBQib  <a href="http://jchfborgryrn.com/">jchfborgryrn</a>
评论人: OIAzeinBXUmJFwJVXM     评论时间: 2013-05-31 18:34:16

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率