Question

在将网格渲染到窗口（monitorResize:true）时，我使用了Ext.Window。但这并不能解决问题。

CListingEditorGrid =  new Ext.grid.EditorGridPanel({
      id: 'CListingEditorGrid',
      renderTo:'grid_div',
      viewConfig:{
        forceFit:true // CHANGED THIS
    },
      store: CDataStore,
      cm: CColumnModel,
      sm:selmodel,
      enableColLock:false,
      clicksToEdit:1,
      selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
      plugins:[filters],
      bbar: new Ext.PagingToolbar(
    {
    store:CDataStore,
    pageSize:10,
    plugins: [filters]
    }),
      tbar: [{
         text: 'Add Contact',
         tooltip: 'Add Contact',
         handler: displayFormWindow
      },
      {
              text:'Delete Contact',
              tooltip:'Delete Contact',
              handler:deleteContacts
      }
      ]
    });
CListingWindow = new Ext.Window({
      id: 'CListingWindow',
      title: 'Contacts List',
      closable:true,
      width:1000,
      height:500,
      layout: 'fit',
      items: [CListingEditorGrid],
      renderTo:'grid_div',
      resizable:false

    });

Answer 1

假设您正在使用ext 3 ...

试试这个：

var store = new Ext.data.ArrayStore({
    fields: [{name: 'Id'},{name: 'Name'},{name: 'Email'}],
    data: [
        ['1','Egy','egy.mohammad.r@callysta-engineering.com'],
        ['2','Ebo','mohammad.erdin@gmail.com']
    ]
});
var grid = new Ext.grid.GridPanel({
    store: store,
    viewConfig :{
        forceFit : true // thisfor force fit the grid (no horizontal scroll)
    },
    columns: [
        {header: 'Id',dataIndex: 'Id'},
        {header: 'Name',dataIndex: 'Name'},
        {header: 'Email', dataIndex: 'Email'}
    ]
});
var win = new Ext.Window({
    layout:'fit',
    title : "resizeable",
    width:500,
    height:300,
    closeAction:'hide',
    items: [grid]
});
win.show(this);

这里有2个错误：

monitorResize不是Ext.Window或Ext.grid.GridPanel
当您使用Ext.Window并希望将内容放入其中时..使用layout: "fit"配置。

Answer 2

一些错误：

两个组件不应使用renderTo并指向同一个div。这不是一个正确的方法。
您可以在不使用元素的情况下渲染整个事物。请尝试以下代码：

var CListingEditorGrid = new Ext.grid.EditorGridPanel({
    //normally, we don't assign ids if there is no obvious reason to use this.
    //id: 'CListingEditorGrid',

    //We don't need this as this grid will be rendered into the window
    //renderTo: 'grid_div',
    viewConfig: {
        //forceFit is used by the GridView, so to have the GridView
        //fits into the grid, not grid fits into the window
        forceFit: true
    },
    store: CDataStore,
    cm: CColumnModel,

    //You don't need to have this
    //sm: selmodel,
    enableColLock: false,
    clicksToEdit: 1,
    //The default sm is already multi-selectable so you could probably
    //remove this selModel.
    /*
    selModel: new Ext.grid.RowSelectionModel({

        singleSelect: false
    }),
    */
    plugins: [filters],
    bbar: new Ext.PagingToolbar({
        store: CDataStore,
        pageSize: 10,
        plugins: [filters]
    }),
    tbar: [{
        text: 'Add Contact',
        tooltip: 'Add Contact',
        handler: displayFormWindow
    }, {
        text: 'Delete Contact',
        tooltip: 'Delete Contact',
        handler: deleteContacts
    }]
});

var CListingWindow = new Ext.Window({
    //id: 'CListingWindow',
    title: 'Contacts List',
    //closable: true,
    width: 1000,
    height: 500,
    layout: 'fit',
    items: [CListingEditorGrid],
    //renderTo: 'grid_div',
    resizable: false
});

//Show this window
CListingWindow.show();

如果有效，请更新我们。我还没测试过。但是网格应该与参数layout:'fit'很好地匹配窗口。

在调整浏览器窗口大小时使网格可调整大小

2 个答案: