Ext.grid.RowExpander的应用2

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

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

 

 

http://www.easyjf.com/blog/html/20080630/1671168.html