`
zhaolianyang
  • 浏览: 97434 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext中combobox在GridPanel里显示数据问题

EXT 
阅读更多
一、首先我先写好一个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
                      }
}


分享到:
评论

相关推荐

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    - `GridComboBox` 提供了更好的用户体验,尤其是在数据量较大且需要快速查找和比较的场景下。 - 常用于表单中的选择字段,如选择多个客户、产品或类别等。 7. **优化与注意事项** - 考虑性能,当数据量很大时,...

    Extjs EditorGridPanel中ComboBox列的显示问题

    为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....

    ext 3.0中文API

    在EXT 3.0中文文档.CHM文件中,开发者可以找到关于EXT组件、布局、数据绑定、AJAX通信、事件处理等方面的详细信息。这个CHM文件通常包含一个索引和搜索功能,使得查找特定API或概念变得更加便捷。通过深入学习和理解...

    ext的表格行编辑(roweditor)实现(c#)

    在EXT JS这个强大的JavaScript框架中,RowEditor是一个非常实用的功能,尤其对于数据处理密集型的应用,如企业级的后台管理系统。RowEditor允许用户直接在表格的行内进行编辑,提供了直观且高效的用户体验。本教程将...

    examples.ext.net-5.zip

    同时,理解EXT.NET的数据绑定机制也很关键,如Store、Model和Proxy的配置,它们决定了数据如何从服务器获取并显示在组件上。 总结来说,"examples.ext.net-5.zip"中的实例代码是学习EXT.NET 5.2与WebForm结合开发的...

    EXT例子,可以直接跑

    EXT提供了丰富的组件库,例如`GridPanel`用于数据展示,`FormPanel`用于数据输入,`TabPanel`实现多标签页,`Window`用于弹出对话框,`Toolbar`提供操作按钮,`TreePanel`展示层次结构数据,以及各种小部件如`...

    Ext组件说明 Ext组件概述

    它通常与Ext的数据存储组件一起使用,以提供更复杂的数据显示效果。 ##### 6. **DatePicker(日期选择器)** DatePicker组件提供了一个直观的界面来选择日期。它包括一个日历弹出窗口,支持多种日期格式和范围限制...

    Ext TreePanel

    通过在列配置中指定`editor`属性,我们可以为每个单元格添加编辑器,例如`TextField`、`ComboBox`等,使得用户可以直接在网格中修改数据。编辑时,`EditorGridPanel`会使用这些编辑器来控制用户的输入,并在用户完成...

    ExtPanel和其他控件

    在本文中,我们将深入探讨Ext.Net框架中的几个关键控件及其属性,包括ExtPanel、Resizable、GridPanel、TreeNode以及Store和ComboBox。这些控件在构建富客户端Web应用程序时扮演着重要角色。 首先,让我们来看看Ext...

    简单ext jsp数据库操作例子

    在学生管理系统中,我们可以使用GridPanel显示学生列表,FormPanel用于添加或修改学生信息,ComboBox可以用于选择年级或专业。 2. **JSP页面和服务器端逻辑** 在JSP页面中,我们通常使用Java脚本let()或者脚本...

    ext简单例子

    GridPanel是EXT中的核心组件,用于显示和操作表格数据。它可以动态加载数据,支持排序、分页、过滤、编辑等功能。EXT的网格还支持行选择、列隐藏、自定义列渲染和事件监听。 4. **日期框(DateField)**: ...

    Ext与后台数据库交互

    在Ext框架中,为了更好地处理数据和用户界面的交互,引入了一系列强大的类来简化开发过程。 ##### 1.1 Ext.data `Ext.data`是Ext框架的核心模块之一,它主要负责封装与数据相关的各种操作。该模块下包括了多个子类...

    可编辑表格Ext.grid.EditorGridPanel

    2. Ext.grid.EditorGridPanel:EditorGridPanel是Ext JS中的一种网格组件,它扩展了GridPanel,增加了单元格级别的编辑功能。用户可以直接在表格中修改数据,而无需跳转到单独的编辑页面。 二、核心特性 1. 可编辑...

    Ext中文教程.最好的Ext学习资料

    - **Ext.util.Format类**:提供了日期、货币、数字等多种格式化的功能,使数据显示更加人性化。 - **XTemplate进阶**:通过深入理解XTemplate的工作原理,可以实现更复杂的模板逻辑。 #### 八、组件结构与生命周期 ...

    解决ext下拉列表全选和去全选功能

    标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...

    Ext-JS框架中文文档

    - **JavaScript类的定义**: 在ExtJS中,可以通过特定的方法来定义类,这些类可以被继承并扩展。 - **ExtJS命名空间的定义**: 命名空间是ExtJS中组织代码的一种方式,它有助于避免全局变量的污染。 - **配置...

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

    **2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...

    ext说明文档和查阅手册

    在EXT的文档中,"Ext2.2API中文文档.CHM"是一份非常重要的资源,它详细介绍了EXT 2.2版本的API接口和功能。CHM文件是Microsoft编写的帮助文档格式,通常包含索引、搜索和目录等功能,便于用户快速查找和学习EXT的...

Global site tag (gtag.js) - Google Analytics