• EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框,并点一次触发一次事件


    主要代码:

     {
                        header: '属性值',
                        dataIndex: 'PropertyValueName',
                         130,
                        editor: new Ext.form.field.ComboBox({
                            typeAhead: true,
                            triggerAction: 'all',
                            name:'PropertyValueName',
                            store: comboData_DynaPropertyValue,
                            valueField: "PropertyValueName",
                            displayField: "PropertyValueName",
                            mode: 'remote',//local
                            editable: false,
                            triggerAction: 'all',
                            autoload: true,
                            listeners: {
                                "expand": function (combo, store, index) {
                                    var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;                               
                                    comboData_DynaPropertyValue.load({
                                        params: {
                                            PropertyId: selectedData.PropertyId, //获取当前选择行的字段ID
    start: startDynaProperty, limit: limitDynaProperty } }); } } }) }

    详细代码:

    var startDynaProperty = 0;
    var limitDynaProperty = 30;
    Ext.define('DynaProperty', {
        extend: 'Ext.data.Model',
        fields: [
                { name: "PropertyId", type: "int" },
                { name: "PropertyName", type: "string" },
                { name: "PropertyEngName", type: "string" },
                { name: "PropertyValueId", type: "string" },
                { name: "PropertyValueName", type: "float" }
        ]
    });
    
    var store_DynaProperty = Ext.create('Ext.data.Store', {
        model: 'DynaProperty',//这个地方DynaProperty不是一个对象,而是一个类
        remoteSort: false,
        remoteFilter: true,
        pageSize: limitDynaProperty,  //页容量20条数据
        method: 'POST',
        proxy: {//代理
            type: 'ajax',
            url: "/UI/HttpHandlerData/GalleryManagement/GalleryManagement.ashx?operation=SearchPicList",//请求
            extraParams: {
                start: startDynaProperty,
                limit: limitDynaProperty
            },
            reader: {
                type: 'json',
                root: 'Table',  //根节点
                totalProperty: 'result' //数据总条数
            }
        },
        sorters: [{
            //排序字段。
            property: 'PropertyId',
            //排序类型,默认为 ASC 
            direction: 'ASC'
        }],
        autoLoad: true  //即时加载数据
    });
    
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });
    
    var comboData_DynaPropertyValue = Ext.create('Ext.data.Store', {
        fields: ['PropertyValueId', 'PropertyValueName'],
        autoLoad: true,
        proxy: {
            type: "ajax",
            url: '/UI/HttpHandlerData/TrademarkCar/TrademarkCar.ashx?operation=Search',
            reader: {
                type: "json",
                root: "Table"
            }
        }
    });
    
    var grid_DynaProperty = Ext.create('Ext.grid.Panel', {
        store: store_DynaProperty,
        autoWidth: true,
        aotuHeight: true,
        animCollapse: false,
        enableColumnMove: false,
        enableHdMenu: false,
        loadMask: true,
        loadMask: {
            msg: '正在载入数据,请稍候...'
        },
        viewConfig: {
            forceFit: true,
            stripeRows: true
        },
        forceFit: true, //列表宽度自适应
        stripeRows: true,//斑马线
        autoSizeColumns: true, //根据每一列内容的宽度自适应列的大小 
        trackMouseOver: true, //鼠标移动时高亮显示
        selModel: { selType: 'checkboxmodel' },   //选择框
        scroll: true,
        plugins: [rowEditing],
        columns: [
                    { header: '序号', xtype: 'rownumberer', align: 'left',  50 },
                    {
                        header: '属性', dataIndex: 'PropertyName',  200
                    }, {
                        header: '填值方式', dataIndex: 'ValueMethod',  200
                    },{
                        header: '属性值', dataIndex: 'PropertyValueName',  200
                    }, {
                        header: '属性值',
                        dataIndex: 'PropertyValueName',
                         130,
                        editor: new Ext.form.field.ComboBox({
                            typeAhead: true,
                            triggerAction: 'all',
                            name:'PropertyValueName',
                            store: comboData_DynaPropertyValue,
                            valueField: "PropertyValueName",
                            displayField: "PropertyValueName",
                            mode: 'remote',//local
                            editable: false,
                            triggerAction: 'all',
                            autoload: true,
                            listeners: {
                                "expand": function (combo, store, index) {
                                    var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;                               
                                    comboData_DynaPropertyValue.load({
                                        params: {
                                            PropertyId: selectedData.PropertyId, start: startDynaProperty,
                                            limit: limitDynaProperty
                                        }
                                    });
                                }
                            }
                        })
                    }
        ]
    });
  • 相关阅读:
    update语句
    java List和数组相互转换方法
    mysql查最大字符串
    Mybatis各种模糊查询
    mysql 递归查询父节点 和子节点
    String类型根据逗号分隔转为list
    This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its de 错误解决办法
    java中String数组和List的互相转化
    实现List集合中数据逆序排列
    String字符串去掉双引号
  • 原文地址:https://www.cnblogs.com/foreverfendou/p/4431059.html
Copyright © 2020-2023  润新知