0

  1. 我需要在网格中一次添加一个或多个记录。单击添加按钮后，我可以一次添加一条记录。但他的事情是我需要一次添加多条记录。我尝试同时使用 clickToEdit、clicksToMoveEditor 但不工作。

  2. 我需要在编辑网格时将复选框居中对齐。

  3. 主要是当我能够在网格中编辑时，我只能编辑除开始日期和结束日期列之外的字段。它不是从数据库中呈现的。

如果网格的配置参数错误，谁能帮助我。

this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1,
            autoCancel: true,
            listeners: {
                scope: this,
                canceledit: function(editor, event) {
                    if(!editor.record.get('FocusMarketId')) { //if it was a brand new record
                        console.log("edit");
                        console.log(editor.record.get('Id'));
                        var sm = this.mcmGridPanel.getSelectionModel();
                        App.mcmFocusMarketStore.remove(sm.getSelection());
                        if(sm.getCount()) {
                            sm.select(0);
                        }
                    }
                }
            }

        });


var addFocusMarket = function(focusmarket) {
this.mcmRowEditing.cancelEdit();
console.log("add focus market");
var record = new Sch.model.Resource({
Id: focusmarket ? focusmarket.Id : '', 
Origin: focusmarket ? focusmarket.Origin : '',
Destination: focusmarket ? focusmarket.Destination: '',
CabinClass: focusmarket ? focusmarket.CabinClass: '',
StartAvailability: focusmarket ? focusmarket.startAvailability: '', 
EndAvailability: focusmarket ? focusmarket.endAvailability: ''
});
console.log("records-->"+record);
App.mcmFocusMarketStore.insert(0, record);
this.mcmRowEditing.startEdit(0, 0);
this.mcmHasChanges = true;
};

this.mcmGridPanel = new Ext.grid.GridPanel({
            height: 240,
            width: 540,
            title: 'Results',
            store: App.mcmFocusMarketStore,
            multiSelect: true,
            x: 0,
            y: 170,
            columns: [
                { xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true, 
                    editor: {
                            xtype: 'textfield',
                            maxLength: 4,
                            minLength: 4,
                            maxChars: 4,
                    }
                },
                { xtype: 'gridcolumn', text: 'Origin',  sortable: true, width: 100, dataIndex: 'Origin', 
                    editor: {
                        xtype: 'textfield',
                        maxLength: 3,
                        minLength: 3,
                        maxChars: 3,
                    }
                },  
                { xtype: 'gridcolumn', text: 'Destination',  sortable: true, width: 100, dataIndex: 'Destination',
                    editor: {
                        xtype: 'textfield',
                        maxLength: 3,
                        minLength: 3,
                        maxChars: 3,
                    }
                },  
                { xtype: 'gridcolumn', text: 'Cabin',  sortable: true, width: 80, dataIndex: 'CabinClass', 
                    editor: {
                        xtype: 'textfield',
                            maxLength: 1,
                            minLength: 1,
                            maxChars: 1,
                    }
                },
                { xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
                    editor: {
                        xtype: 'datefield',
                        format: 'd/m/Y'
                    }
                },
                { xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y', 
                    editor: {
                        xtype: 'datefield',
                        format: 'd/m/Y'
                    }
                },
                {
                    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>';
                    },
                    listeners : 
                    {
                        checkchange : function(column, recordIndex, checked) 
                                    {
                                       this.mcmRemoveFocusMarket();
                                        //or send a request
                                    } 
                    },
                    handler: function() {
                       /* var sm = grid.getSelectionModel();
                        rowEditing.cancelEdit();
                        store.remove(sm.getSelection());
                        if (store.getCount() > 0) {
                            sm.select(0);
                        }*/
                    },
                    //disabled: true,
                    editor: {
                        xtype: 'checkbox'
                    }

                }
            ],
            tbar: [
                {
                    text: 'Add',
                    tooltip: 'Add Focus Market',
                    iconCls: 'icon-shift-add',
                    scope: me,
                    handler: function() {
                            addFocusMarket.call(me);
                    }
                }
            ],
            plugins: [ this.mcmRowEditing ],
4

1 回答 1

0

1.) 不要直接将记录添加到网格中。将数据添加到后端并重新加载网格的存储，然后在网格中显示新添加的数据

2）对齐应该使用checkcolumn来固定

3）我不太确定你在这里问什么。根据我的理解，编辑似乎有效。您确定以正确的格式（日期：'2014/02/04'）为日期列提供数据吗？

// Presuming you are using ExtJS 4...
this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing',
{
    clicksToEdit: 1,
    autoCancel: true,
    listeners: {
        scope: this,
        edit: function(editor, context, eOpts){
            // do your editing processing here
            // lookup api documentation for params
        }
    }
});

this.mcmGridPanel =  Ext.create('Ext.grid.Panel',
{
    height: 240,
    width: 540,
    title: 'Results',
    store: App.mcmFocusMarketStore,
    multiSelect: true,
    x: 0,
    y: 170,
    columns: [
        { xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true, 
            editor: {
                    xtype: 'textfield',
                    maxLength: 4,
                    minLength: 4,
                    maxChars: 4,
            }
        },
        { xtype: 'gridcolumn', text: 'Origin',  sortable: true, width: 100, dataIndex: 'Origin', 
            editor: {
                xtype: 'textfield',
                maxLength: 3,
                minLength: 3,
                maxChars: 3,
            }
        },  
        { xtype: 'gridcolumn', text: 'Destination',  sortable: true, width: 100, dataIndex: 'Destination',
            editor: {
                xtype: 'textfield',
                maxLength: 3,
                minLength: 3,
                maxChars: 3,
            }
        },  
        { xtype: 'gridcolumn', text: 'Cabin',  sortable: true, width: 80, dataIndex: 'CabinClass', 
            editor: {
                xtype: 'textfield',
                    maxLength: 1,
                    minLength: 1,
                    maxChars: 1,
            }
        },
        { xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
            editor: {
                xtype: 'datefield',
                format: 'd/m/Y'
            }
        },
        { xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y', 
            editor: {
                xtype: 'datefield',
                format: 'd/m/Y'
            }
        },
        { xtype: 'checkcolumn', text: 'Delete?', width: 60, dataIndex: 'delete', format: 'd/m/Y', 
            // Make checkboxes of checkcolumn unchangeable. Editor can change state then.
            // Handle changes in CellEditing/RowEditing 'edit' event for consistent behavior with other columns.
            listeners: {beforecheckchange: function(column, recordIndex, checked){return false}}
            editor: {xtype: 'checkbox'},
            // checkcolumn aligns center by default use the 2 lines below instead if you want to align left
            //align: 'left',
            //editor: {xtype: 'checkbox', style: 'text-align:left; display:inline; padding-left:10px;'},
        }
    ],
    tbar: [
        {
            text: 'Add',
            tooltip: 'Add Focus Market',
            iconCls: 'icon-shift-add',
            scope: me,
            handler: function() {
                    addFocusMarket.call(me);
            }
        }
    ],
    plugins: [ this.mcmRowEditing ]
});
于 2014-02-04T12:18:32.513 回答