Ext Js如何将组合框添加到Grid中的特定单元格?

时间:2017-08-01 10:48:27

标签: javascript jquery extjs

我正在使用Ext Js v6.2,在我使用ext js网格构建的应用程序表中,当我尝试添加组合框时,我想将组合框添加到特定单元格 [DEMO IMAGE ATTACHED] 整个细胞变为组合框,但我需要特定的细胞组合框。在这里我的代码,我在文档和其他东西中搜索它没有帮助。请解决问题。

        Ext.define('OtherCharges1', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'name', mapping: 'name'},
                {name: 'age', mapping: 'age'},
                {name: 'marks', mapping: 'marks'},
                {name: 'rate', mapping: 'rate'}
            ]
        });
        var newData1 = [
            {name: "Freight"},
            {name: "Insurance" },
            {name: " Addl Chrg(High Sea)"},
            {name: "Revenue Deposit on"}
        ]
        var gridStore3 = Ext.create('Ext.data.Store', {
            model: 'OtherCharges1',
            data: newData1
        });
        var otherStore1 = Ext.create('Ext.grid.Panel', {
            cls: 'custom-grid',
            id: 'OtherId',
            store: gridStore3,
            stripeRows: true,
            width: '100%',
            collapsible: false,
            enableColumnMove: false,
            columnLines: true,
            sortableColumns: false,
            enableColumnHide: false,
            enableColumnResize: false,
            enableRowHeightSync: true,
            columns:
                    [
                        {
                            header: "",
                            dataIndex: 'name',
                            flex: 1

                        },
                        {
                            editor: {
                                xtype: 'textfield',
                                selectOnFocus: true
                            },
                            dataIndex: '',
                            flex: .5,
                            sortable: true,
                            hideable: false,
                        },
                        {
                            editor: {
                                xtype: 'textfield',
                                selectOnFocus: true
                            },
                            dataIndex: 'age',
                            flex: .5,
                            sortable: true,
                            hideable: false,
                        },
                        {
                            editor: {
                                xtype: 'textfield',
                                selectOnFocus: true
                            },
                            dataIndex: 'marks',
                            flex: .5,
                            sortable: true,
                            hideable: false,
                        },
                        {
                            editor: {
                                xtype: 'textfield',
                                selectOnFocus: true
                            },
                            dataIndex: 'rate',
                            flex: .5,
                            sortable: true,
                            hideable: false,
                        }],
            selType: 'cellmodel',
            plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1
                })]
        });

Ext Js Grid

1 个答案:

答案 0 :(得分:1)

要在特定单元格中编辑网格,您需要编辑<form action="" method="post"> <select name="month" id="month"> <option value="">Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> </select> <select name="day" id="day"> <option value="">Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select name="year" id="year"> <option value="">Year</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> </select> <input type="submit" value="Submit"> </form>事件。创建验证以确保您正在编辑所需的单元格。

在这种情况下,您只会编辑第1列和第1行中的单元格。

beforeedit

请记住,ExtJS网格从0开始 See this example fidlle.