Изменение размера сетки при изменении размера окна браузера

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

Несколько ошибок:

1. renderTo не должен использоваться двумя компонентами и указывать на один и тот же div. Это не правильный путь.

2. Вы можете визуализировать все это, даже не используя элементы. Попробуйте следующий код:

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'.

Answer 2

при условии, что вы используете 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 ошибки:

1. monitorResize isне один из видов конфигов в Ext.Window или Ext.grid.GridPanel
2. , когда вы используете Ext.Window и хотите разместить содержимое внутри .. используйте layout: "fit" config.