Question

I have main window which has inner grid components. When I press a button in the window, one of the grid components gets updated with data from database. That part is working well but when I resize the window component this grid component doesn’t gets resized. It looks like it gets fixed width when setSource() is called.

Is there an extjs function that can redraw/update size of the grid component or how to preven this from happening?

I use this component Ext.grid.property.Grid from ext js 4

Here is the main container

var main_container = Ext.create('Ext.container.Container',
{
   xtype: 'container',
   id: "container_id",
   anchor: '100%',
   layout:'column',
   items:[
      column_1,
      column_2,
      column_3
   ]
})

Answer 1

I don’t know any layout that would allow you to dynamically resize columns to fit their contents, this is a non-trivial task (imagine how would you implement it on your own).
You can specify a fixed percentage width to every column according to your expectations on the length of data inside it, something like:

 items: [{
        title: 'Column 1',
        columnWidth: .25
    },{
        title: 'Column 2',
        columnWidth: .55
    },{
        title: 'Column 3',
        columnWidth: .20
    }],

You can also give a fixed width to any column, this way the remaining space would be shared by percentage-width columns. Refer to http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Column

Otherwise you would have to measure every cell’s width after each data update to figure out a cell with maximum width and attempt to resize column according to that width (but still make sure the total width of all columns doesn’t exceed container width).