• 技术文章 >web前端 >js教程

    extjs中grid中嵌入动态combobox的应用_extjs

    2016-05-16 18:12:39原创640
    拿combobox的数据
    复制代码 代码如下:

    comboDS = new Ext.data.JsonStore({
    url : 'test.do',
    fields : [{
    name : 'id'
    }, {
    name : 'display'
    }]
    });

    combobox定义
    combobox 中的id必须要有,后面要跟据id取combobox值。
    复制代码 代码如下:

    var comboBox = new Ext.form.ComboBox({
    id : "cb", //必须有
    typeAhead : true,
    readOnly : true,
    allowBlank : false,
    autoScroll : true,
    selectOnFocus : true,
    emptyText : '请选择...',
    store : comboDS,
    forceSelection : true,
    triggerAction : 'all',
    displayField : 'display',
    valueField : 'id'
    });

    grid 的定义:
    复制代码 代码如下:

    ds = new Ext.data.Store({
    baseparams : {
    start : 0,
    limit : RowCount
    },
    proxy : new Ext.data.HttpProxy({
    url :'test2.do'
    }),
    reader : new Ext.data.JsonReader({
    root : 'data',
    totalProperty : 'totalCount'
    }, [{
    name : "bh"
    }, {
    name : "test"
    }]);
    });
    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
    header : "编号",
    dataIndex : "bh"
    }, {
    header : "测试",
    dataIndex : "test",
    renderer : renderer,
    editor : comboBox
    }]);
    grid = new Ext.grid.EditorGridPanel({
    title : '测试',
    ds : ds,
    cm : cm,
    clicksToEdit : 1,
    viewConfig : {
    forceFit : true
    },
    bbar : new Ext.PagingToolbar({
    pageSize : RowCount,
    store : ds,
    displayInfo : true,
    displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
    emptyMsg : "没有记录"
    })
    });

    cm 的renderer函数
    此方法为解决combobox修改后显示为id
    复制代码 代码如下:

    function renderer(value, p, r) {
    var index = comboDS.find(Ext.getCmp('cb').valueField, value);
    var record = comboDS.getAt(index);
    var displayText = "";
    if (record == null) {
    displayText = value;
    } else {
    displayText = record.data.display;// 获取record中的数据集中的display字段的值
    }
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:extjs grid combobox
    上一篇:选择器的朋友可以试试这个思路 延迟执行归并选择操作_javascript技巧 下一篇:TBCompressor js代码压缩_javascript技巧
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 四种方法搞定JavaScript创建多个对象• Angular的:host、:host-context、::ng-deep选择器• 什么是异步资源?浅析Node实现异步资源上下文共享的方法• 什么是变更检测?聊聊angular的变更机制• 一文掌握JavaScript数字类型
    1/1

    PHP中文网