一、首先我先写好一个ColumnModel,定义代码如下:
js代码:
var PAG007_clm_AddressCm = new Ext.grid.ColumnModel([
{header:'<center>都市名</center>',dataIndex:'CITY_NAME',editor: PAG007_cmb_City},
{header:'<center>住所</center>',dataIndex:'ADDRESS',editor:new Ext.form.TextField({allowBalank:false})},
{header:'<center>电话号码</center>',dataIndex:'TEL_NO',editor:new Ext.form.TextField({allowBalank:false})},
{header:'<center>电话号码种类</center>',dataIndex:'TEL_NO_TYPE',editor: new Ext.form.ComboBox({
id:'type',
name:'type',
readOnly:true,
fieldLabel: '电话号码种类,
hiddenName:'id',
store: PAG007_cmb_Type_Store,
displayField:'text',
valueField:'value',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择',
selectOnFocus:true
}),
renderer: function(value, cellmeta, record)
{
//通过匹配value取得ds索引
var index = PAG007_cmb_Type_Store.find(Ext.getCmp('type').valueField,value);
//通过索引取得记录ds中的记录集
var record = PAG007_cmb_Type_Store.getAt(index);
//返回记录集中的value字段的值
var value = "";
if (record)
{
value = record.data.text;
}
return value;//注意这个地方的value是上面displayField中的value
}
},
// {header:'<center>削除</center>',dataIndex:'ISCHECK'},
chb_delete
]);
二、定义的是EditorGridPanel:
var PAG007_AddressGridPanel = new Ext.grid.EditorGridPanel({
title: '当前联系方式,
cm : PAG007_clm_AddressCm,
sm : PAG007_rsm_AddressSm,
plugins:[chb_delete],
clicksToEdit:1,
loadMask : true,
region : 'center',
store : PAG007_AddressGridPanel_Store,
enableColumnResize : false,
enableColumnMove : true,
viewConfig : {
scrollOffset : 20,
forceFit : true
}
});
三、定义的是JsonStore:(我这里是用的静态的数据,动态的数据同样应该可行。)
var PAG007_cmb_Type_Store = new Gt.common.engine.JsonStore({
data : {
'root' :[
{'value' : '1','text' : '住宅'},
{'value' : '2','text' : '公司'},
{'value' : '3','text' : '手机'}
]
},
root : 'root',
fields : ['value', 'text']
});
四、关键部分代码(我用的是‘电话号码种类’的那列,我的种类是分'1'、'2'、'3',三种情况,是在后台数据库中取出来的,要对应前台的displayField显示):
{header:'<center>種類</center>',dataIndex:'TEL_NO_TYPE',editor: new Ext.form.ComboBox({
id:'type',
name:'type',
readOnly:true,
fieldLabel: '电话号码种类',
hiddenName:'id',
store: PAG007_cmb_Type_Store,
displayField:'text',
valueField:'value',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择',
selectOnFocus:true
}),
renderer: function(value, cellmeta, record)
{
//通过匹配value取得ds索引
var index = PAG007_cmb_Type_Store.find(Ext.getCmp('type').valueField,value);
//通过索引取得记录ds中的记录集
var record = PAG007_cmb_Type_Store.getAt(index);
//返回记录集中的value字段的值
var value = "";
if (record)
{
value = record.data.text;//对应store中的text字段(fields)
}
return value;//注意这个地方的value是上面displayField中的value
}
}
分享到:
相关推荐
- `GridComboBox` 提供了更好的用户体验,尤其是在数据量较大且需要快速查找和比较的场景下。 - 常用于表单中的选择字段,如选择多个客户、产品或类别等。 7. **优化与注意事项** - 考虑性能,当数据量很大时,...
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
在EXT 3.0中文文档.CHM文件中,开发者可以找到关于EXT组件、布局、数据绑定、AJAX通信、事件处理等方面的详细信息。这个CHM文件通常包含一个索引和搜索功能,使得查找特定API或概念变得更加便捷。通过深入学习和理解...
在EXT JS这个强大的JavaScript框架中,RowEditor是一个非常实用的功能,尤其对于数据处理密集型的应用,如企业级的后台管理系统。RowEditor允许用户直接在表格的行内进行编辑,提供了直观且高效的用户体验。本教程将...
同时,理解EXT.NET的数据绑定机制也很关键,如Store、Model和Proxy的配置,它们决定了数据如何从服务器获取并显示在组件上。 总结来说,"examples.ext.net-5.zip"中的实例代码是学习EXT.NET 5.2与WebForm结合开发的...
EXT提供了丰富的组件库,例如`GridPanel`用于数据展示,`FormPanel`用于数据输入,`TabPanel`实现多标签页,`Window`用于弹出对话框,`Toolbar`提供操作按钮,`TreePanel`展示层次结构数据,以及各种小部件如`...
它通常与Ext的数据存储组件一起使用,以提供更复杂的数据显示效果。 ##### 6. **DatePicker(日期选择器)** DatePicker组件提供了一个直观的界面来选择日期。它包括一个日历弹出窗口,支持多种日期格式和范围限制...
通过在列配置中指定`editor`属性,我们可以为每个单元格添加编辑器,例如`TextField`、`ComboBox`等,使得用户可以直接在网格中修改数据。编辑时,`EditorGridPanel`会使用这些编辑器来控制用户的输入,并在用户完成...
在本文中,我们将深入探讨Ext.Net框架中的几个关键控件及其属性,包括ExtPanel、Resizable、GridPanel、TreeNode以及Store和ComboBox。这些控件在构建富客户端Web应用程序时扮演着重要角色。 首先,让我们来看看Ext...
在学生管理系统中,我们可以使用GridPanel显示学生列表,FormPanel用于添加或修改学生信息,ComboBox可以用于选择年级或专业。 2. **JSP页面和服务器端逻辑** 在JSP页面中,我们通常使用Java脚本let()或者脚本...
GridPanel是EXT中的核心组件,用于显示和操作表格数据。它可以动态加载数据,支持排序、分页、过滤、编辑等功能。EXT的网格还支持行选择、列隐藏、自定义列渲染和事件监听。 4. **日期框(DateField)**: ...
在Ext框架中,为了更好地处理数据和用户界面的交互,引入了一系列强大的类来简化开发过程。 ##### 1.1 Ext.data `Ext.data`是Ext框架的核心模块之一,它主要负责封装与数据相关的各种操作。该模块下包括了多个子类...
2. Ext.grid.EditorGridPanel:EditorGridPanel是Ext JS中的一种网格组件,它扩展了GridPanel,增加了单元格级别的编辑功能。用户可以直接在表格中修改数据,而无需跳转到单独的编辑页面。 二、核心特性 1. 可编辑...
- **Ext.util.Format类**:提供了日期、货币、数字等多种格式化的功能,使数据显示更加人性化。 - **XTemplate进阶**:通过深入理解XTemplate的工作原理,可以实现更复杂的模板逻辑。 #### 八、组件结构与生命周期 ...
标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...
- **JavaScript类的定义**: 在ExtJS中,可以通过特定的方法来定义类,这些类可以被继承并扩展。 - **ExtJS命名空间的定义**: 命名空间是ExtJS中组织代码的一种方式,它有助于避免全局变量的污染。 - **配置...
**2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...
在EXT的文档中,"Ext2.2API中文文档.CHM"是一份非常重要的资源,它详细介绍了EXT 2.2版本的API接口和功能。CHM文件是Microsoft编写的帮助文档格式,通常包含索引、搜索和目录等功能,便于用户快速查找和学习EXT的...