在Ext.grid.Panel列中显示之前修改文本字段中的值

时间:2015-07-16 10:55:49

标签: javascript extjs

当我点击Ext.grid.Panel中的一列时,我需要修改文本字段中的值,所以我使用了之前的监听器

Ext.create('Ext.data.Store', {    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
        {"name":"Homer", "email":"homer@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});


Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false,
                listeners : {
                    beforeshow : function(obj, event, eOpts) {
                        alert();
                    }
                }
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selModel: 'cellmodel',
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

https://fiddle.sencha.com/#fiddle/qiv

但是当我点击列时,听众没有触发,请您告诉我如何在点击列时在文本字段中显示之前修改该值。

先谢谢。

3 个答案:

答案 0 :(得分:0)

如果您想显示与存储的值不同的值,我认为更好的方法是在列中使用Renderer

答案 1 :(得分:0)

只需将您的侦听器代码从插件移动到网格即可。 那不是......

plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1,
        listeners : {
            beforeedit: function(ed, context){
                var field,
                    column = grid.headerCt.getHeaderAtIndex(context.colIdx);

                if (context.column.dataIndex === 'email') {
                    context.column.field.setValue('ashok');
                    console.log(context.column);
                }    
            }
        }

    },

将侦听器移动到网格。 :)

plugins: {
    ptype: 'cellediting',
    clicksToEdit: 1,

},
listeners : {
        beforeedit: function(ed, context){
            var field,
                column = grid.headerCt.getHeaderAtIndex(context.colIdx);

            if (context.column.dataIndex === 'email') {
                context.column.field.setValue('ashok');
                console.log(context.column);
            }    
        }
 },

答案 2 :(得分:0)

我收到了Sencha论坛的回复,

如果有兴趣,请按照以下代码和链接

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
        {"name":"Homer", "email":"homer@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selModel: 'cellmodel',
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1,
        listeners : {
            beforeedit: function(ed, context){
                var field,
                    column = grid.headerCt.getHeaderAtIndex(context.colIdx);

                if (context.column.dataIndex === 'email') {
                    console.log('ashok');
                }    
            }
        }

    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

小提琴: - https://fiddle.sencha.com/#fiddle/qiv

论坛帖子: - Forum Post Link