`
清风_夕瑶
  • 浏览: 53826 次
  • 性别: 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实现

    在EXT JS库中,"ext的edittreegrid实现"是一种功能强大的组件,它结合了树形视图(Tree)和编辑网格(EditorGrid)的功能,允许用户在具有层次结构的数据上进行直观的编辑操作。这个组件对于那些需要管理结构化且...

    ExtJs + api + 笔记 + 完整包

    "26-表格控件GirdPanel及EditorGrid使用.doc"涵盖了ExtJs的GridPanel和EditorGrid。GridPanel用于显示二维数据,支持排序、分页和编辑等功能。EditorGrid则允许用户直接在表格单元格中编辑数据,适用于数据录入和...

    Extjs 初体验

    通过实践和阅读官方文档,开发者可以深入学习如何创建自定义组件、使用数据绑定、实现事件处理以及优化性能等高级主题。此外,ExtJS社区也非常活跃,提供了许多示例、插件和教程,帮助开发者解决实际问题。 总之,...

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

    表格可以动态添加列,调整列宽,支持分页,甚至可以结合EditorGrid实现行的编辑和动态添加。Ext JS 2.0相较于1.x版本,表格控件的功能和API有更多的优化和改进。表格的分页功能可以通过前端工具条实现,也可以通过...

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

    JavaScript代码中,Ext的API被用来创建和配置EditorGrid,而DWR的JavaScript API则用于与服务器端的Java方法进行交互。 总的来说,这个实例为学习AJAX、Ext JS和DWR的初学者提供了一个直观且实用的学习资源,强调了...

    Ext 开发指南 学习资料

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

    精通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 4.1.0 中文API

    中文API文档的出现极大地降低了中国开发者学习和使用Ext 4.1.0的门槛。 尽管此文档是中间版本,只完成了80.09%的翻译工作,但仍然包含了大量关键知识点,帮助我们理解框架的核心概念和方法。以下是一些主要的知识点...

    ExtJS3总结内容

    - `editorgrid`: `Ext.grid.EditorGridPanel` - `flash`: `Ext.FlashComponent` - `grid`: `Ext.grid.GridPanel` - `listview`: `Ext.ListView` - `panel`: `Ext.Panel` - `progress`: `Ext.ProgressBar` - `...

    EXT2.0中文教程

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

    extjs xtype

    通过使用`xtype`,开发者可以简化代码,减少重复,并提高代码的可读性和维护性。 例如,当你想要创建一个按钮,你可以使用`xtype: 'button'`来表示你将使用`Ext.Button`类。这样,EXTJS会自动根据指定的`xtype`创建...

    ext增删查改demo

    4. 数据存储(Store):Store是EXTJS中管理数据的核心组件,它可以连接到各种数据源,如JSON、XML、Ajax服务器等,加载数据并提供给其他组件使用。在CRUD操作中,Store负责数据的加载、保存和同步。 5. JSON:文件...

    extjs 项目整理

    它基于 JavaScript 和 AJAX 技术,可以独立于后端技术使用,这使得开发者可以更加专注于前端用户体验的开发而无需关心后端的实现细节。 - **特点**: - **跨平台**: 支持多种浏览器和设备,确保了应用的一致性和兼容...

    Ext中xtype和vtype.

    * editorgrid:一个编辑器网格组件,用于编辑数据。 * grid:一个网格组件,用于显示数据。 * paging:一个分页工具栏组件,用于分页显示数据。 * panel:一个面板组件,用于容纳其他组件。 * progress:一个进度条...

    Ext组件描述,各个组件含义

    - **xtype**: `editorgrid` - **功能描述**:Editor Grid Panel 是一个支持行级编辑的网格面板。 - **主要用途**:适合于需要对表格中的数据进行编辑的场景。 **2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype*...

    extjs培训2011-12-17

    ### ExtJS基础知识介绍 #### 一、ExtJS简介 ExtJS是一个高级的JavaScript库,用于构建功能丰富的Web应用程序。...此外,了解如何正确配置和使用ExtJS环境也是至关重要的一步,这有助于确保项目的顺利进行。

Global site tag (gtag.js) - Google Analytics