Extjs3.2 automatic adaptation of gridpanel height and width

The effect is as follows:

Adaptive settings must be set on both the horizontal and vertical heights.
In smartgwt (smartclient), the height and width can be both 100%. The JS class library of smartclient automatically synchronizes the size of the other container and the parent container.
However, the autowidth and autoheight of the gridpanel of extjs do not play this role, and the 100% setting is not supported.

Later, we found that we needed to set layout: 'fit 'in the parent container and then added viewconfig {forcefit: True to gridpanel, // Let the grid columns automatically fill the entire width of the grid, you do not need to set the width of a column.

The Code is as follows: parent container

Jobdefine :{
Title: 'Task define ',
Iconcls: 'icon _ job ',
Closable: True,
Layout: 'fit ',
Tbar: New Ext. toolbar ({
Items :[{
Text: 'add task ',
Iconcls: 'btnadd _ icon'
},'-',{
Text: 'delete task ',
Iconcls: 'btndel _ icon'
}, '-', New Ext. UX. Form. searchfield ({
Store: jobinfostore,
Emptytext: 'Enter the task name search'
})]
}),
Items: [createjobinfogrid ('jobfailed')]
}

 

Grid panel configuration

VaR grid = new Ext. Grid. gridpanel ({
ID: ID,
CM: cm,
SM: Sm,
Store: jobinfostore,
Border: false,
Loadmask: True,
Viewconfig :{
Forcefit: True, // make the grid column automatically fill the entire width of the grid, without setting the width of a column.
Emptytext: 'The system has no task'
},
Bbar: New Ext. pagingtoolbar ({
Pagesize: 25,
Store: jobinfostore,
Displayinfo: True,
Displaymsg: 'currently {0}-{1} total {2 }',
Emptymsg: "No record is displayed"
})
})

Extjs started to use for a month. It is a powerful class library, but the solution to many small details is not so intuitive!