`

EditorGridPanel的基本使用方法

EXT 
阅读更多
EditorGridPanel的基本使用,添加一个条件过滤功能。

Editable = Ext.extend(Ext.grid.EditorGridPanel,{

mymenu : null ,
constructor : function(){

this.mymenu = new Ext.form.ComboBox({
triggerAction : 'all' ,
mode : 'local' ,
store : new Ext.data.SimpleStore({
data : [['收入'],['支出']] ,
fields : ['type']
}) ,
displayField : 'type' ,
valueField : 'type' ,
listeners : {
'select' :{
fn : function(_combo,_r,index){
this.filterData(_combo,_r,index) ;
} ,
scope : this
}
}
})  ;
Editable.superclass.constructor.call(this,{
width : 400 ,
height : 400 ,
tbar : ['查询条件',this.mymenu] ,
store : new Ext.data.SimpleStore({
data : [['收入',300],['支出',20],['收入',5000],['支出',1000]] ,
fields : ['type','money']
})  ,
colModel : new Ext.grid.ColumnModel({
columns :[{
header : '类型' ,
dataIndex : 'type' ,
editor : new Ext.form.TextField({
allowBlank : false
})
},{
header : '金额' ,
dataIndex : 'money' ,
editor : new Ext.form.NumberField({
allowBlank : false
})
}]
}) ,
renderTo : 'editable' ,
filterData : function(_combo,_r,index){
//this.store.filter('type',_combo.)
this.store.filter('type',_combo.getValue()) ;
},
listeners : {
'afteredit' : {
fn : function(_obj){
_obj.record.commit() ;
this.filterData(this.mymenu) ;
} ,
scope : this
}
}
})
}
})
分享到:
评论

相关推荐

    可编辑表格Ext.grid.EditorGridPanel

    以上就是关于Ext.grid.EditorGridPanel的基本介绍和使用方法。在实际开发中,你可以根据项目需求调整配置,实现更多功能,如排序、过滤、分页等。通过深入理解和实践,你将能够熟练掌握这个强大的表格编辑组件。

    ExtJS使用笔记

    ExtJS是一个开源的JavaScript库,主要用于...通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件和管理器的使用方法,以及一些针对特定浏览器的布局技巧,为创建美观、高效的用户界面打下坚实的基础。

    ExtJS2.0实用简明教程

    理解这些类和方法是深入学习和使用ExtJS的关键。开发者可以通过查阅文档了解详细的API,以便更好地利用这个框架。 以上是ExtJS2.0实用简明教程的主要内容,通过这些基础知识的学习和实践,开发者可以快速上手,构建...

    ExtJS.in.Action

    第四章“A place for Components”中,详细介绍了各种组件的使用方法,包括按钮、标签、输入框等,并通过示例演示了如何将它们组合在一起以构建更复杂的用户界面。第五章“Organizing Components”则探讨了如何使用...

    EXT的基础文档

    3. **Examples**: 官方提供的示例代码库,初学者可以通过这些实例快速了解EXTJS的各种组件和功能的使用方法。 4. **sPkgs**: 这个目录存放的是压缩后的EXTJS代码,通常用于生产环境,以减少页面加载时间。 5. **...

    EXT_JS实用开发指南_个人整理笔记.docx

    这个开发指南主要涵盖了EXT_JS的基本使用方法和核心概念,对于入门EXT_JS的开发者来说是十分宝贵的资源。以下是EXT_JS的一些关键知识点: 1. **引入EXT_JS库**:在使用EXT_JS开发时,首先需要在HTML页面中引入EXT_...

    WEB应用组件开发指南

    以下是《WEB应用组件开发指南》中提及的一些基本类型扩展方法: **1.1.1 String的扩展** - **`trim`** 方法用于去除字符串两端的空白字符。 - **用途**: 通常用于处理用户输入的数据时,以确保不会因为多余的空格...

    Ext grid合并单元格

    此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、ColumnModel 的配置以及数据绑定等关键概念。 ### 一、Ext JS Grid 概览 Ext JS 是一个...

    extjs的快速入门教程

    - **TreePanel基本使用**: - 显示层次结构的数据。 - **TreeNode**: 单个节点。 - **TreeLoader**: 负责加载节点数据。 - **自定义TreeLoader**: 实现更灵活的数据加载机制。 #### 九、表单(Forms) - **...

    EXT_JS实用开发指南_个人整理笔记

    - **表单及元素组件**:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel和Window等。 6. **组件的使用**: 创建组件时,需要指定其配置参数,如尺寸...

    Ext表格控件和树控件

    下面是一个简单的使用 `EditorGridPanel` 的示例: ```javascript Ext.onReady(function() { var data = [ ['任务管理系统', '3D', 'http://www.renwu.com'], ['Blog系统', 'BJT', 'http://www.blog.org'], ['...

    ext学习之路

    文档(docs)是学习任何框架的起点,ExtJS 4.20的官方文档详细记录了API的使用方法,是开发者不可或缺的资源。此外,ExtJS还提供了一系列示例(examples),通过实际案例演示如何运用各种组件和功能,帮助开发者快速...

    ext教程1.pdf

    EXTJS 是一个强大的JavaScript 库,专用于构建富客户端Web...在EXTJS 的开发中,了解并掌握其基本结构和使用方法至关重要。 首先,EXTJS 页面的基础设置通常包括引入CSS样式表和JavaScript库文件。例如: ```html ...

    ExtJs2.0简明教程

    可以通过`on`方法来绑定事件处理器: ```javascript button.on('click', function() { console.log('Button clicked'); }); ``` ### 四、使用面板 #### 4.1 Panel 面板是ExtJS中最常用的容器之一,它可以用来...

    Extjs实用教程

    #### 二、EXTJS的基本使用 1. **页面引用** - 引入样式文件:`<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>` - 引入核心脚本文件:`...

    EXT2.0 GRID 示例

    文档"document"可能包含了EXT2.0 GRID的详细配置、使用方法、示例代码等,对于理解和使用EXT GRID组件至关重要。通过深入学习这个文档,你可以掌握EXT GRID的基本用法和高级特性,从而在项目中构建出功能强大的数据...

    老师整理的extjs学习笔记

    **7.1 Ext.data.Store 基本概念** `Ext.data.Store` 是 ExtJS 中用于存储和管理数据的核心组件。它支持从多种数据源获取数据,并提供了数据的排序、过滤等功能。 **7.2 Ext.data.DataProxy -- Ext.data.Store 的...

    学习ExtJS Panel常用方法

    在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性用于控制 Panel 边框的样式。当设置为 `true` 时,...

Global site tag (gtag.js) - Google Analytics