`
清风_夕瑶
  • 浏览: 53011 次
  • 性别: Icon_minigender_1
  • 来自: 潘多拉星球
社区版块
存档分类
最新评论

tree和editorgrid联合使用

    博客分类:
  • js
阅读更多

    懒的写注释了,暂时把这里当做是我的文档保存。这是一个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);

 

 

分享到:
评论

相关推荐

    MySQL,DWR,JSON,EXT 实现EditorGrid

    使用EXT的EditorGrid,实现前台页面对数据直接进行增删改查操作。用户的友好性较好,已经实现分页功能。例子中使用了DWR和JSON.含MySQL数据库脚本,并已加入Log4j日志记录。本例详细讲解可以参见:...

    ext的edittreegrid实现

    Tree与EditorGrid结合在一起,树形的展示结构,可以对其中的数据进行编辑,类似RowEditor.

    可编辑表格Ext.grid.EditorGridPanel

    此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!

    Ext 开发指南 学习资料

    1.6.1. 直接使用下载的发布包 1.6.2. 只把必要的东西放进项目中 2. 震撼吧!让你知道ext表格控件的厉害。 2.1. 功能丰富,无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. grid默认自带的功能 2.4. 按顺序,...

    ext 论坛摘要====

    当然还有很多地方需要优化,例如实现描述性的列标题(而不是以字段名做为列标题),配置列宽和对齐方式,实现 Dynamic EditorGrid等,通常我们还需要一个配置档,将这些原先硬编码的信息在配置档里配置好,然后在...

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    深入浅出ExtJS第2版

    1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT 3 1.5 为什么页面提示"找不到图片" 3 1.6 ...

    EXT教程EXT用大量的实例演示Ext实例

    9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!...

    EXT2.0中文教程

    9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!...

    AJAX 入门视频之 Ext 2.0.1 & DWR 1表格实时编辑器实例

    说实话, 我也是特别懒的人, 很早就想看看 Ext, 尤其是做一个实时编辑的带后台的表格例子, 一直没能深入, 今天抽时间深入看了看 Ext 的 EditorGrid,可编辑的表格控件,总算凑出来了个实时增删改的例子(不单独弹出添加...

    EfsFrame(java开发框架) v2.2 源代码.rar

    c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、...

    EfsFrame(net开发框架) v2.2 源代码.rar

    c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、...

    EfsFrame(php开发框架) 2.2.rar

    c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种...

    EfsFrame(php开发框架) v2.2 源代码.rar

    c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、...

Global site tag (gtag.js) - Google Analytics