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的基本介绍和使用方法。在实际开发中,你可以根据项目需求调整配置,实现更多功能,如排序、过滤、分页等。通过深入理解和实践,你将能够熟练掌握这个强大的表格编辑组件。
ExtJS是一个开源的JavaScript库,主要用于...通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件和管理器的使用方法,以及一些针对特定浏览器的布局技巧,为创建美观、高效的用户界面打下坚实的基础。
理解这些类和方法是深入学习和使用ExtJS的关键。开发者可以通过查阅文档了解详细的API,以便更好地利用这个框架。 以上是ExtJS2.0实用简明教程的主要内容,通过这些基础知识的学习和实践,开发者可以快速上手,构建...
第四章“A place for Components”中,详细介绍了各种组件的使用方法,包括按钮、标签、输入框等,并通过示例演示了如何将它们组合在一起以构建更复杂的用户界面。第五章“Organizing Components”则探讨了如何使用...
3. **Examples**: 官方提供的示例代码库,初学者可以通过这些实例快速了解EXTJS的各种组件和功能的使用方法。 4. **sPkgs**: 这个目录存放的是压缩后的EXTJS代码,通常用于生产环境,以减少页面加载时间。 5. **...
这个开发指南主要涵盖了EXT_JS的基本使用方法和核心概念,对于入门EXT_JS的开发者来说是十分宝贵的资源。以下是EXT_JS的一些关键知识点: 1. **引入EXT_JS库**:在使用EXT_JS开发时,首先需要在HTML页面中引入EXT_...
以下是《WEB应用组件开发指南》中提及的一些基本类型扩展方法: **1.1.1 String的扩展** - **`trim`** 方法用于去除字符串两端的空白字符。 - **用途**: 通常用于处理用户输入的数据时,以确保不会因为多余的空格...
此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、ColumnModel 的配置以及数据绑定等关键概念。 ### 一、Ext JS Grid 概览 Ext JS 是一个...
- **TreePanel基本使用**: - 显示层次结构的数据。 - **TreeNode**: 单个节点。 - **TreeLoader**: 负责加载节点数据。 - **自定义TreeLoader**: 实现更灵活的数据加载机制。 #### 九、表单(Forms) - **...
- **表单及元素组件**:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel和Window等。 6. **组件的使用**: 创建组件时,需要指定其配置参数,如尺寸...
下面是一个简单的使用 `EditorGridPanel` 的示例: ```javascript Ext.onReady(function() { var data = [ ['任务管理系统', '3D', 'http://www.renwu.com'], ['Blog系统', 'BJT', 'http://www.blog.org'], ['...
文档(docs)是学习任何框架的起点,ExtJS 4.20的官方文档详细记录了API的使用方法,是开发者不可或缺的资源。此外,ExtJS还提供了一系列示例(examples),通过实际案例演示如何运用各种组件和功能,帮助开发者快速...
EXTJS 是一个强大的JavaScript 库,专用于构建富客户端Web...在EXTJS 的开发中,了解并掌握其基本结构和使用方法至关重要。 首先,EXTJS 页面的基础设置通常包括引入CSS样式表和JavaScript库文件。例如: ```html ...
可以通过`on`方法来绑定事件处理器: ```javascript button.on('click', function() { console.log('Button clicked'); }); ``` ### 四、使用面板 #### 4.1 Panel 面板是ExtJS中最常用的容器之一,它可以用来...
#### 二、EXTJS的基本使用 1. **页面引用** - 引入样式文件:`<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>` - 引入核心脚本文件:`...
文档"document"可能包含了EXT2.0 GRID的详细配置、使用方法、示例代码等,对于理解和使用EXT GRID组件至关重要。通过深入学习这个文档,你可以掌握EXT GRID的基本用法和高级特性,从而在项目中构建出功能强大的数据...
**7.1 Ext.data.Store 基本概念** `Ext.data.Store` 是 ExtJS 中用于存储和管理数据的核心组件。它支持从多种数据源获取数据,并提供了数据的排序、过滤等功能。 **7.2 Ext.data.DataProxy -- Ext.data.Store 的...
在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性用于控制 Panel 边框的样式。当设置为 `true` 时,...