`
寻梦者
  • 浏览: 637343 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Ext 下拉菜单(ComboBox) 自动显示选项中的文本项 问题

    博客分类:
  • ext
阅读更多


 

在Ext 2.2 中,如果使用Ext.form.ComboBox 作为editor,并设置了store,在选择后,在表格单元中显示的是store中的valueField,显然不符合实际使用习惯。如果要改变单元格的展示方式,应该在ColumnModel 配置column时设置renderer,顾名思义就是一个渲染器,默认参数有(value, metadata, record, rowIndex, colIndex, store),具体说明见API

测试如:

       dataColumnModel = new Ext.grid.ColumnModel([
{
                header: 'Party',
                dataIndex: 'IDparty',
                width: 150,
                editor: new Ext.form.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    store:new Ext.data.SimpleStore({
                        fields:['partyValue', 'partyName'],
                        data: [['1','No Party'],['2','Federalist'],['3','Democratic-Republican'],['4','Democratic'],['5','Whig'],['6','Republican']]
                    }),
                    mode: 'local',
                    displayField: 'partyName',
                    valueField: 'partyValue',
                    listClass: 'x-combo-list-small'
                })
                ,renderer: function(value, metadata, record, rowIndex, colIndex, store){
                    console.log(this);
// how to get the editor.store.data ?
                    return value;
                }
            }
        ]);

具体例子来源: Tutorial:Grid PHP SQL Part7

但似乎没有办法在renderer内部访问当前column的editor。

这个应该是个常见需求,搜索官方论坛后果然有所获。有人找到了临时解决方案:

// link http://extjs.com/forum/showthread.php?p=255483
Ext.override(Ext.grid.GridView, {
getColumnData : function(){
   var cs = [], cm = this.cm, colCount = cm.getColumnCount();
   for(var i = 0; i < colCount; i++){
    var name = cm.getDataIndex(i);
    cs[i] = {
      name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name),
      renderer : cm.getRenderer(i),
      id : cm.getColumnId(i),
      style : this.getColumnStyle(i),
      editor : cm.getCellEditor(i, 0)
                           //,cm: cm
    };
   }
   return cs;
}
});
Ext.util.Format.comboboxRenderer = function(value){
var editor = this.editor;
if(editor){
   var field = editor.field;
   if(field && field.findRecord && field.valueField) {
    if((typeof value.indexOf === 'function') && value.indexOf(',') != -1){
     // we have a lovcombo with several options selected
     var keys = value.split(',');
     var values = [];
     Ext.each(keys, function(key){
      var rec = field.findRecord(field.valueField, key);
      if(rec){
       values.push(rec.data[field.displayField]);
      }
     });
     return values.join(', ');
    }else{
     var rec = field.findRecord(field.valueField, value);
     if(rec){
      return rec.data[field.displayField];
     }
    }
   }
}
return value;
};

原理就是:
1.覆盖Ext原生的Ext.grid.GridView,把editor附加到renderer上,
2. 添加一个Ext.util.Format.comboboxRenderer,在配置时renderer指定为这个,修改后的代码为:

       dataColumnModel = new Ext.grid.ColumnModel([
{
                header: 'Party',
                dataIndex: 'IDparty',
                width: 150,
                editor: new Ext.form.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    store:new Ext.data.SimpleStore({
                        fields:['partyValue', 'partyName'],
                        data: [['1','No Party'],['2','Federalist'],['3','Democratic-Republican'],['4','Democratic'],['5','Whig'],['6','Republican']]
                    }),
                    mode: 'local',
                    displayField: 'partyName',
                    valueField: 'partyValue',
                    listClass: 'x-combo-list-small'
                })
                ,renderer: Ext.util.Format.comboboxRenderer
            }
        ]);

如果要更个性化的定制,也可以直接在renderer里访问editor了,如:

                ,renderer: function(value, metadata, record, rowIndex, colIndex, store){
                    console.log(this.editor);
// 具体访问data数据方法见Ext.util.Format.comboboxRenderer代码
                    return value;
                }

 

分享到:
评论

相关推荐

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

    `GridComboBox` 结合了 `ComboBox` 和 `GridPanel` 的特性,允许用户在一个下拉菜单中浏览和选择多行数据。 1. **Extjs4 的 ComboBox** - `ComboBox` 是EXTJS中的一个基础组件,它提供了文本输入框和下拉列表的...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    Ext下拉列表扩展lovcombo

    EXT下拉列表扩展lovcombo的实现,主要是对ComboBox进行了自定义,将下拉菜单中的选项呈现为一组可被勾选的复选框。这样做可以显著增强用户体验,特别是当选项数量较多时,用户可以快速地多选,而无需反复打开下拉...

    无废话ExtJs 教程十[下拉列表:Combobox]

    在ExtJS中,下拉列表(Combobox)是常见的组件之一,它结合了输入框和下拉菜单的功能,允许用户进行选择或自由输入。本教程将深入探讨ExtJS中的Combobox组件,包括其基本用法、配置选项、事件处理和自定义功能。 1....

    Ext下拉列表

    在ExtJS中,下拉列表(ComboBox)是一种常用的UI组件,常用于实现选择项的输入控件,它结合了文本输入框和下拉菜单的功能。在本场景中,我们将探讨如何使用ExtJS创建一个动态从数据库读取数据的下拉列表。 1. **...

    EXT3.2 多选下拉框

    EXT3.2 多选下拉框是一种在EXT JS框架中实现的用户界面组件,它允许用户在下拉菜单中选择多个选项。EXT JS是一个基于JavaScript的富客户端应用开发框架,用于构建桌面级的Web应用。EXT3.2是EXT JS的一个版本,尽管...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    `displayField`指定树节点在下拉列表中显示的字段,而`tpl`则可以自定义整个列表项的呈现方式。此外,通过`listConfig`可以进一步定制下拉列表的样式和行为。 5. **事件监听与交互** 为了响应用户的点击行为,需要...

    【叨、校长】Ext 下拉树插件_ComboTree_xz

    【叨、校长】Ext 下拉树插件_ComboTree_xz 是一个基于ExtJS库的扩展组件,用于在用户界面中实现下拉树形选择功能。...同时,对于需要在下拉菜单中展示层级关系的场景,`ComboTree`提供了一个高效且直观的解决方案。

    EXT.form组件

    3. `combo`:`Ext.form.ComboBox`是下拉列表框组件,允许用户在预设的选项中进行选择,同时可以提供搜索功能以便快速定位选项。 4. `datefield`:`Ext.form.DateField`是日期选择组件,用户可以通过日历控件选择...

    coolite ComboBox智能提示

    在网页开发中,coolite ComboBox是一个强大的组件,它提供了下拉菜单功能,并且具备智能提示和智能检索的能力。这个功能使得用户在输入时可以快速找到匹配的选项,提高了用户体验。以下是关于coolite ComboBox智能...

    Ext组件说明 Ext组件概述

    SplitButton组件是一个带有下拉菜单的按钮,常用于扩展按钮的功能,如添加更多操作选项。 ##### 2. **TabPanel(标签面板)** TabPanel组件允许在一个界面上展示多个不同页面,每个页面由一个标签表示,用户可以...

    下拉列表 learning extjs 中文

    例如,`store`可以是本地数据或远程数据,`displayField`用于显示在下拉框中的文本,`valueField`则是选定项的值。 3. **数据源** - **本地数据**:可以直接用数组或者Store对象来提供数据,如`store: [{text: '...

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

    - **功能描述**:Split Button 是一个组合按钮,主要由一个主按钮和一个下拉菜单组成。 - **主要用途**:提供扩展的功能选项,用户可以通过点击按钮旁边的箭头来展开更多选项。 **2.11 Tab Panel (Ext.TabPanel)** ...

    extjs控件列表

    - **描述**: 文本菜单项,用于在菜单中显示不可操作的文本。 - **用途**: 提示信息或标题,增强菜单的可读性。 #### 表单及表单域组件 **Ext.FormPanel** - **描述**: 表单面板,用于组织和管理表单元素。 - **...

    ExtJS下拉列表树控件1

    首先,下拉列表树控件(ComboBox)结合了输入框和下拉菜单的功能,而当这个下拉菜单是树结构时,就形成了一个可展开和折叠的选项列表。这样的设计有助于用户在大量层级数据中快速找到目标信息。在ExtJS中,可以使用`...

    extjs4.2 分页combo动态条数 源码

    Combobox是EXTJS中的一种表单字段,它结合了文本输入框和下拉菜单,允许用户从预定义的选项列表中选择一个值。默认情况下,所有的选项都会被加载到下拉菜单中,但通过添加分页功能,我们可以将大列表拆分成小块,...

    ExtJs组件类的对应表

    2. **`splitbutton`** - `Ext.SplitButton`,带有下拉菜单的按钮,常用于提供额外的菜单选项。 3. **`cycle`** - `Ext.CycleButton`,这是一种带下拉选项菜单的按钮,通常用于在一组预设选项中循环选择。 4. **`...

    ExtJs xtype一览

    - **`menutextitem` (Ext.menu.TextItem)**: 文本菜单项组件,用于在菜单中添加纯文本项。 #### 表单及表单域组件 - **`form` (Ext.FormPanel/Ext.form.FormPanel)**: 表单面板组件,用于创建包含多个表单元素的...

    ExtJS-3.4.0系列目录

    - **菜单栏(Menu)**:提供下拉式菜单,用于放置选项和子菜单。Ext.menu.Menu允许你创建可定制的多级菜单,可与工具栏中的按钮关联,实现点击后展开菜单的效果。 4. **表单(Form)** - **表单面板(Ext.form....

    ExtJs_xtype一览

    - `splitbutton`:`Ext.SplitButton`,扩展了按钮,增加了下拉菜单的功能。 - `cycle`:`Ext.CycleButton`,一种特殊按钮,允许用户在预定义的选项之间循环切换。 - `buttongroup`:`Ext.ButtonGroup`,用于将多...

Global site tag (gtag.js) - Google Analytics