我在使用Ext.Grid.EditorGridPanel时遇到问题,我目前正在使用ExtJS 2.3.0,无法更改。 :-(

跟随问题:

我创建了一个窗口,该窗口由2个FormPanel及其之间的EditorGridPanel组成。
对于网格的viewConfig,仅设置“ forceFit = true”,而没有为ColumnModel设置样式或视图选项。
仅对于每列,将align选项设置为“ center”。
ColumnModel由13列组成,仅包含或多或少的文本。
现在,我使用浏览器打开正在使用的网站,并打开用于测试GUI的窗口。
当我尝试在单行的单元格之间切换时,整个数据行都移到左侧,
因此不再显示第一个单元格。
将新行添加到网格(通过添加按钮)后,视图将重置,并且每一列的所有单元格都将再次正确显示。
列标题和tbar是固定的,并且始终正确呈现。

IExplorer 8.0x(较旧的Firefox版本(2.0x))会出现问题,但网格在Firefox 3.6x和Safari 5.0x上可以正常工作。
如果有人遇到类似问题,并已解决或有什么想法可能导致该问题,请随时回答。 ;-)
提前谢谢了!

[编辑]
谢谢你的评论,这里是完整来源中的一些修改过的来源:

getTypeSelectionGrid: function() {
    this.gridRecord:  Ext.data.Record.create([
        {name:'id', type:'int'},
        {name:'start', type:'string'},
        {name:'end', type:'string'},
        {name:'mo', type:'boolean'},
        {name:'tu', type:'boolean'},
        {name:'we', type:'boolean'},
        {name:'th', type:'boolean'},
        {name:'fr', type:'boolean'},
        {name:'sa', type:'boolean'},
        {name:'su', type:'boolean'},
        {name:'type', type:'string'}
    ]);

    this.gridStore = new Ext.data.Store({
        baseParams: {
        },
        sortInfo: {field: 'id', direction: 'ASC'},
        proxy: new Ext.data.HttpProxy({
            url: '',
            method: 'post'
        }),
        reader: new Ext.data.JsonReader({
            root: 'data',
            totalProperty: 'totalCount',
            id: 'id'
        }, this.gridRecord)
    });

    var sm = new Ext.grid.RowSelectionModel({ singleSelect: true });

    var columnConfig = [];
    //auto incremented id column
    columnConfig.push({
        header: 'id',
        dataIndex: 'id',
        width: 50,
        editor: new Ext.form.TextField({
            anchor: '100%',
            allowBlank: false,
            disabled: true
        })
    });
    //start value for time range, values from '00:00' to '24:00' steps by second, here shorted to 2 options
    columnConfig.push({
        header: 'start',
        dataIndex: 'start',
        width: 70,
        align: 'center',
        editor: new Ext.form.ComboBox({
            store: new Ext.data.SimpleStore({
                fields: ['val', 'txt'],
                data : [['00:00', '00:00'],['24:00', '24:00']]
            }),
            displayField: 'txt',
            valueField: 'val',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            selectOnFocus: true,
            saveRouting: true,
            forceSelection: true,
            anchor: '100%',
            allowBlank: false
        })
    });
    //same as above for end of time range, dataIndex 'end'

    //now 7 checkbox columns foreach weekday
    columnConfig.push({
        xtype: 'checkcolumn',
        header: 'mo',
        dataIndex: 'mo',
        align: 'center',
        width: 30
    }));
    //same as above for dataIndex 'tu', 'we', 'th', 'fr', 'sa' and 'su'

    //here simplified to SimpleStore, originally a remote store which gets the data
    //by a HttpProxy
    columnConfig.push({
        header: 'type',
        dataIndex: 'type',
        editor: new Ext.form.ComboBox({
            store: new Ext.data.SimpleStore({
                fields: ['val', 'txt'],
                data : [[1, 'type 1'],[2, 'type 2']]
            }),
            displayField: 'txt',
            valueField: 'txt',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            selectOnFocus: true,
            saveRouting: true,
            forceSelection: true,
            anchor: '100%',
            allowBlank: false
        })
    });
    //then 2 plugins which have some functionality for the selected row
    //grid tested with and without both plugins, they are not the cause

    var cm = new Ext.grid.ColumnModel(columnConfig);
    cm.defaultSortable = false;

    //now the grid
    this.typeSelectionGrid = new Ext.grid.EditorGridPanel({
        store: this.gridStore,
        clicksToEdit: 1,
        autoHeight: true,
        cm: cm,
        sm: sm,
        viewConfig: {
            forceFit: true
        },
        tbar: [{
            text: 'add new row',
            cls: 'x-btn-text',
            scope: this,
            handler: function(){
                //adds a row with incremented id
            }
        }],
        listeners: {
            scope: this,
            show: function() {
                sm.selectFirstRow.defer(1000, selectionModel);
            }
        }
    });

    return this.typeSelectionGrid;
},

//the grid is then inserted between the Panels into the window component
//looks something like that
render: function() {

    var layoutFn = function(pnl) {
        pnl.ownerCt.ownerCt.doLayout.defer(Ext.isIE ? 300 : 0, pnl.ownerCt.ownerCt);
        pnl.doLayout.defer(Ext.isIE ? 500 : 200, pnl);
    };
    this.cardLayout.add({
        layout: 'border',
        border: false,
        bodyStyle: 'background-color: #fff',
        items: [
            {
                region: 'center',
                border: false,
                layout: 'column',
                autoScroll: true,
                defaults: {
                    columnWidth: 1,
                    bodyStyle: 'padding: 5px;',
                    border: false,
                    autoHeight: true,
                    layout: 'column',
                    defaults: {
                        columnWidth: 1
                    }
                },
                items: [
                    //first Ext.form.FormPanel with some TextFields
                    {
                        items: {
                            listeners: {
                                expand: layoutFn,
                                collapse: layoutFn
                            },
                            frame: true,
                            title: 'panel with a grid',
                            collapsible: true,
                            titleCollapse: true,
                            layout: 'fit',
                            autoHeight: true,
                            items: this.getTypeSelectionGrid()
                        }
                    }
                    //second Ext.form.FormPanel with some TextFields
                ]
            }
        ]
    });
}

最佳答案

首先,您似乎有一些JavaScript语法错误。我知道您只发布了一段代码,但尝试通过JS Lint运行整个过程。

对于初学者:

this.gridRecord:  Ext.data.Record.create([
    {name:'id', type:'int'},
    {name:'start', type:'string'},
    {name:'end', type:'string'},
    {name:'mo', type:'boolean'},
    {name:'tu', type:'boolean'},
    {name:'we', type:'boolean'},
    {name:'th', type:'boolean'},
    {name:'fr', type:'boolean'},
    {name:'sa', type:'boolean'},
    {name:'su', type:'boolean'},
    {name:'type', type:'string'}
]);


应该:

this.gridRecord = Ext.data.Record.create([


尽管我不确定是否会导致此问题,但我发现您的列配置已分配了宽度。即使您将viewConfig属性设置为“ forceFit:true”,我仍怀疑编辑器可能会尝试使用为每列设置的宽度。

看看是否可以清除任何内容。

关于javascript - ExtJS EditorGridPanel显示错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4794693/

10-16 20:11
查看更多