tree和editorgrid联合使用

本文介绍了一个使用ExtJS框架实现的tree与editorgrid联合使用的简单案例。文章通过具体代码展示了如何创建树形面板(TreePanel)和编辑网格(EditorGridPanel),并提供了添加、删除及编辑表格数据的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    懒的写注释了,暂时把这里当做是我的文档保存。这是一个tree与editorgrid联合使用的案例,比较简单。继承方式类似于js的继承。坦率的说在做了十个月的ext开发中,我水平也仅仅停留在还算是比较熟练的使用水平上,对于ext的复杂运用和高质量编程还处于盲区。现在的认识是,首先一定要有js编程基础,我说的不是仅仅会用js做判断之类的,而是要达到熟悉其继承关系的层次。这样之后,再参考官方例子多做练习,在熟悉官方例子中慢慢形成自己的编写风格。由于,复用问题,我劝诫看客在使用ext过程中不要频繁使用id属性,尤其是在form中使用。不多写了,做个保存,开始工作。

 

BudgedModelPanel = function(){
	/**
	 * 模板显示树
	 */
	 var budgetModelTree = new Ext.tree.TreePanel({
        region : 'west',
        anchor : '95%', 
        frame : false, 
        width:200, 
        height:500, 
        checkModel: 'multiple', 
        onlyLeafCheckable: true, 
        animate : false, 
        rootVisible : true, 
        autoScroll : true, 
        loader : new Ext.tree.TreeLoader(), //之前定义的加载器 
        root : new Ext.tree.AsyncTreeNode()
    });
   /**
    * 子项列表
    */
  var sm=new Ext.grid.CheckboxSelectionModel();
  var cm = new Ext.grid.ColumnModel([sm,{dataIndex:'budgetMid',hidden:true},
			new Ext.grid.RowNumberer({header:'序号',width:50}),
			{width:150,header:"子项名称",sortable:true,dataIndex:'budgetName',
			editor:new Ext.form.TextField({allowBlank:false})
		}]);
	var store = new Ext.data.Store();
    var childRecord =Ext.data.Record.create([store,{dataIndex:'budgetMid',hidden:true},
		{header:"子项名称",dataIndex:'budgetName'}
	]);
	
  var bdModelEditorGrid = new Ext.grid.EditorGridPanel({region : 'center',
        title:'子项列表',
        animCollapse:false,cm:cm,width:'50%',frame:true,height:350,clicksToEdit:1,
		sm:sm,ds:store,stripeRows:true,fouceFit:true,
		tbar:[{text:'增加',iconCls:'ext-button-add',handler:addLine},{text:'删除',iconCls:'ext-button-delete',handler:removeChild},{text:'保存',iconCls:'x-button-save'}] ,
		loadMask:{msg:'正在加载数据,请稍候'},trackMouseOver:true,bodyStyle:'padding:5px 5px 0'
  });
  //增加一行
  function addLine(){
    var tempData = new childRecord({budgetName:''});
    bdModelEditorGrid.stopEditing();
    store.add(tempData);
    store.modified.push(tempData);
    bdModelEditorGrid.startEditing(0, 0);
  }
  //删除
  function removeChild(){
      var records = bdModelEditorGrid.getSelectionModel().getSelections();
	   var bgIDS = "";
	   for(var i=0;i<records.length;i++){
			     var record = records[i];
			     bgIDS += record.pbiCode;
			     if(i!=records.length-1)  bgIDS += ",";
			   }
	   if(records==0){Ext.Msg.alert("系统提示","请选择要删除的数据");return;};
	    Ext.Msg.confirm("系统提示:","请确认是否执行删除操作?",function(button,text){
	    if(button=="yes"){
			for(var i=0;i<records.length;i++){
		     var record = records[i];
		     if(record!=null) store.remove(record);
		     bdModelEditorGrid.refresh();
		   }
	  }});
  }
  BudgedModelPanel.superclass.constructor.call(this,{
      layout:'border',height:500,width:500,
      items:[budgetModelTree,bdModelEditorGrid]
  });
}
Ext.extend(BudgedModelPanel,Ext.Panel);

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值