在extjs 4中编辑器的组合框和复选框?

时间:2013-10-16 03:43:49

标签: html5 css3 extjs4

我使用编辑器选项在extjs中设计网格。我需要组合框作为列,并在编辑网格时也需要组合框。我需要删除列作为编辑和普通网格的复选框列。它不起作用。任何人都可以帮助我

以下是摘录:

this.mcmGridPanel = new Ext.grid.GridPanel({
            height: 300,
            width: 690,
            title: 'Results',
            store: store,
            multiSelect: true,
            x: 0,
            y: 170,
            columns: [
                { xtype: 'gridcolumn', text: 'FlightNumber', sortable: true, flex: 1, width: 150, dataIndex: 'FlightNumber', hidden: true,
                    editor: new Ext.form.field.ComboBox({
                                typeAhead: true,
                                triggerAction: 'all',
                                selectOnTab: true,
                                lazyRender: true,
                                listClass: 'x-combo-list-small'
                            })  
                },
                { xtype: 'gridcolumn', text: 'Origin',  sortable: true, width: 150, dataIndex: 'Origin',
                    editor: {
                        editor: new Ext.form.field.ComboBox({
                            typeAhead: true,
                            triggerAction: 'all',
                            selectOnTab: true,
                            lazyRender: true,
                            listClass: 'x-combo-list-small'
                        })  
                    }
                },  
                { xtype: 'gridcolumn', text: 'Destination',  sortable: true, width: 150, dataIndex: 'Destination',
                    editor: {
                        editor: new Ext.form.field.ComboBox({
                            typeAhead: true,
                            triggerAction: 'all',
                            selectOnTab: true,
                            lazyRender: true,
                            listClass: 'x-combo-list-small'
                        })  
                    }
                },  

                { xtype: 'datecolumn', text: 'StartDate', width: 80, dataIndex: 'StartAvailability', format: 'Y-m-d',
                    editor: {
                        xtype: 'datefield',
                        allowBlank: false,
                        format: 'Y-m-d'
                    }
                },
                { header: 'StartTime', text: 'StartTime', width: 60, dataIndex: 'StartAvailabilityTime',  
                    editor: {
                        xtype: 'timefield',
                        format: 'H:i',
                        increment: 15,
                        allowBlank: false
                    }
                },
                { xtype: 'datecolumn', text: 'EndDate', width: 80, dataIndex: 'EndAvailability', format: 'Y-m-d',  
                    editor: {
                        xtype: 'datefield',
                        allowBlank: false,
                        format: 'Y-m-d'
                    }
                },
                { header: 'EndTime', text: 'EndTime', width: 60, dataIndex: 'EndAvailabilityTime',
                    editor: {
                        xtype: 'timefield',
                        format: 'H:i',
                        increment: 15,
                        allowBlank: false
                    }
                },
                {
                    xtype: 'gridcolumn',
                    text: 'Delete?',
                    header: 'Delete?',
                    dataIndex: 'delete',
                    width: 60,
                    renderer: function (value, meta, record, rowIndex, colIndex) {
                        return '<center><input type="checkbox" id="Delete-' + rowIndex + '"/></center>';
                    },
                    handler: function() {

                    },
                    //disabled: true,
                    editor: {
                        xtype: 'checkbox',
                        cls: 'x-grid-checkheader-editor',
                    }

                }
            ]
            });

我使用以下代码,但它不起作用。任何人都可以帮助我

1 个答案:

答案 0 :(得分:0)

我没有看到应该显示组合框的功能。为了让它自动运行,你应该添加RowEditing插件。

尝试添加此

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    })
],

看看this example in the doc。这将有助于您进行行编辑工作。

您的列定义是否正常?
我使用了这个组合框,但我知道这不是所需的完整配置:

{
    dataIndex: 'name',
    flex: 1,
    text: 'Name',
    field: {
        xtype: 'combobox'
    },
}

更新

我今天遇到了类似的问题:我的文本字段没有呈现。

罪魁祸首出人意料:
我使用自定义模板,并且缺少显示所需的css规则。我所要做的就是使用sencha cmd sencha app build重建应用程序。这样就完成了模板的文件,并且roweditor的字段显示正确。

你可能也会遇到这种情况......