`
猫不吃的鱼
  • 浏览: 158909 次
  • 性别: Icon_minigender_1
  • 来自: 芜湖市
社区版块
存档分类
最新评论

Ext-Grid,Tree,Form等小结

阅读更多
1、Ext.tree.TreePanel

//选择树中某个节点
var node =tree.getSelectionModel().getSelectedNode()

//node中除了id,text,leaf,children等规定属性,用户自定义属性可以通过如下方式从树中获得其值
var value=typeTree.getSelectionModel().getSelectedNode().attributes.xxx

//重新根据 TreePanel的loader: new Ext.tree.TreeLoader({url:"url"}) 加载刷新树
tree.root.reload()

//获取树根节点 下所有节点
tree.getRootNode().childNodes

2、Ext.grid.GridPanel

var store= new Ext.data.JsonStore({
    fields: storeInfo
    idProperty: 'ID',
    autoSave: true,
    loadAndSort:function(param){
if(param!=undefined)
this.proxy = new Ext.data.HttpProxy({url:"deploy/instances.action"+"?"+param});
else
this.proxy = new Ext.data.HttpProxy({url:"deploy/instances.action"});//使用代理加载数据,则不会使用 url属性的请求
this.removeAll();//清楚grid中所有数据
                this.load();//加载数据
                this.sort([{ field : 'PROCESS', direction: 'ASC' }, { field : 'VERSION', direction: 'ASC'} ], 'ASC');
                 // 先process升序,process相同时,version升序,
   } 
})


var grid=new Ext.grid.GridPanel({
  store:store,
  ......
})

//返回选择的所有行
var rows = grid.getSelectionModel().getSelections()
//删除grid中的行
store.remove(rows[index]);

3、Ext.form.FormPanel

//提交表单前可以调用此方法,验证所有输入框是否有值等
if(form.getForm().isValid()){

}

//提交表单
form.getForm().submit({
            success:function(form,action){
           
            },
            failure:function(form,action){
           
            }
});

//清楚表单域中值
form.getForm().reset()

//初始化form
Ext.getCmp('formId').getForm().loadRecord(rec)

//给form的field赋值
Ext.getCmp('formId').getForm().findField('fieldId').setValue('');

//form xtype 为textfield的域获取值
Ext.getCmp('id').getValue()

//form xtype 为displayfield的域获取值
Ext.getCmp('id').value


4、formpanel表单项的隐藏
Ext.getCmp('STRIKE_AMT').disable();
Ext.getCmp('STRIKE_AMT').getEl().up('.x-form-item').setDisplayed(false);
   显示:Ext.getCmp('STRIKE_AMT').enable();  
Ext.getCmp('STRIKE_AMT').getEl().up('.x-form-item').setDisplayed(true);// show label 

其他:

Ext.get("id").getValue() //根据id获取页面元素的value

Ext.getDom("startProcessFrame").contentWindow.location.href='xxx' //给iframe的href赋值
2
1
分享到:
评论

相关推荐

    ext-js3.2 中文API,例子,包全都有

    API文档详细介绍了EXT-JS3.2中的每一个组件、函数和配置选项,如Grid面板、Form表单、Window对话框、Tree视图等,还有事件处理机制和数据绑定概念。 `ext-3.4.0.zip`是EXT-JS3.2的核心库文件,包含了所有EXT-JS的...

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...

    前端组件ext-4.2.1-gpl.zip

    它包括但不限于表格(Grid)、面板(Panel)、窗口(Window)、菜单(Menu)、按钮(Button)、表单(Form)、树形视图(Tree)、图表(Charts)等,这些组件设计精美且易于定制,能够满足各种界面设计需求,为用户...

    extjs--ext-3.2.1

    它提供了一系列预定义的UI组件,如表格(Grid)、树形视图(Tree)、面板(Panel)、窗口(Window)等,开发者可以方便地组合这些组件来构建复杂的用户界面。 2. **数据绑定**:ExtJS的数据绑定机制允许UI组件与...

    ext-4.1.1API

    1. **组件系统**:EXTJS的核心是其组件系统,它包括各种预定义的UI组件,如表格(Grid)、树形视图(Tree)、面板(Panel)、表单(Form)、菜单(Menu)等。这些组件可以组合和自定义,以满足各种复杂界面的需求。 ...

    EXT - 2011-5-30

    5. **Tree**:EXT Tree组件用于展示层次结构的数据,常用于目录浏览、组织结构图等场景。EXT Tree支持动态加载、拖放操作,提供丰富的节点操作接口。 6. **独立的HTML演示和源代码**:这份资源包含了实际的示例页面...

    ext-6.2.0-gpl

    2. **Form Panel**:包含多种输入控件,如文本框、下拉列表等,方便用户输入和编辑数据。 3. **Tree Panel**:适用于展示层次结构数据,如组织架构、文件系统等。 4. **Chart**:提供丰富的图表类型,如柱状图、折线...

    EXT-js-中文手册

    - **更多组件**:除了MessageBox和Grid外,EXT还提供了大量的其他组件,如Form、Tree、TabPanel等,满足不同场景的需求。 - **使用方法**:通过实例演示如何在项目中引入并使用这些组件,提高开发效率。 #### 8. ...

    ext-3.2-beta_6256-157.zip

    在这个3.2版本中,开发者可以找到一系列预定义的UI组件,如表格(Grid)、树形视图(Tree)、表单(Forms)、菜单(Menus)、工具栏(Toolbars)等,这些组件大大简化了创建复杂Web应用的过程。 组件化是ExtJS的一...

    GWT-EXT2.0最佳实践教程,源代码打包供下载

    4. **UI组件的使用**:熟悉EXT-JS提供的各种UI组件,如Grid Panel、Form Panel、Tree Panel等,以及如何自定义组件和布局。 5. **数据绑定和模型**:理解GWT的数据绑定概念,以及如何使用ValueProviders和Models...

    ext-3.4.0开发包

    2. **丰富的组件库**:包含多种预定义的UI组件,如Grid(表格)、Panel(面板)、Window(窗口)、Form(表单)、Tree(树形视图)、TabPanel(选项卡)等,覆盖了常见的Web应用需求。 3. **数据绑定**:EXTJS支持...

    EXT组件初学者教程 grid+tree+window+描述文档

    - 文件"EXT组件grid+tree+window.docx"很可能包含了EXTJS组件的具体实现代码,以及代码中的关键属性和方法解释,帮助初学者理解组件的工作原理和配置方式。 - "role"和"rolePermission"可能是示例中的数据模型或者...

    Extjs tree+grid+form+panel 使用实例

    Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例

    ext-3.0框架源码

    1. **组件化**:EXT 3.0提供了一整套可复用的UI组件,如表格(Grid)、面板(Panel)、窗口(Window)、表单(Form)、树形视图(Tree)、菜单(Menu)等,这些组件可以组合成复杂的应用界面。 2. **MVC架构**:EXT...

    ext-3.0.0框架(带Demo)

    1. **EXTJS组件库**:EXT 3.0.0包含了大量的UI组件,如表格(Grid)、树形视图(Tree)、面板(Panel)、表单(Form)、菜单(Menu)、工具栏(Toolbar)等。这些组件都经过精心设计,具备高度可定制性和可扩展性,...

    ext学习资料ext学习资料

    在本文中,我们将深入探讨Ext Js的核心组件,包括Grid、Form和Tree,并讨论如何在项目中有效地引入和使用Ext Js。 1. **Grid组件** Grid是Ext Js中用于展示和操作表格数据的关键组件。`Ext.grid.GridPanel`允许你...

    extjs4 入门基础,form、grid、tree

    它提供了一整套组件化的用户界面元素,包括表单(Form)、网格(Grid)、树形视图(Tree)等,使得开发者能够创建出功能丰富且交互性强的前端应用。在深入探讨ExtJS 4的基础知识之前,首先确保你已经下载了ExtJS ...

    extjsAjax+ext3.3.1+API.rar

    通过查阅此文档,你可以了解如何创建和配置各种组件,如表格(Grid)、窗口(Window)、表单(Form)、树(Tree)等,以及如何进行数据绑定和事件处理。 "ext-3.3.1.rar" 文件则是ExtJS 3.3.1的核心库。解压后,你...

    官方Ext3.0实例包

    1. 表格(Grid):展示大量数据的表格组件,支持分页、排序、过滤、编辑等功能。 2. 表单(Form):用于数据输入和展示,支持多种表单控件和验证机制。 3. 面板(Panel):基本的容器组件,可以包含其他组件,常...

    ext 资源汇总

    这个"EXT 资源汇总"包含了一系列与EXT相关的组件,如表单(Ext.form)、网格(Ext.grid)和树形视图(tree)。这些组件是EXT的核心功能,允许开发者创建交互式的用户界面。 1. **EXT.form**: EXT.form模块提供了...

Global site tag (gtag.js) - Google Analytics