Question

Using ExtJs.

I’m trying to design a main which is divided into three sub panels (a tree list, a grid and a panel). The way it works is that you have a tree list (west) with elements, you click on an element which populates the grid (center), then you click on an element in the grid and that generates the panel (west).

My main panel containing the three other ones has been defined with a layout ‘border’.

Now the problem I face is that the center layout (the grid) has been defined in the code with a fixed width and the west panel as an auto width. But when the interface gets generated, the grid width is suddenly taking all the space in the interface instead of the west panel.

The code looks like that:

var exploits_details_panel = new Ext.Panel({
 region: 'east',
 autoWidth: true,
 autoScroll: true,
 html: 'test'
});

var exploit_commands = new Ext.grid.GridPanel({
 store: new Ext.data.Store({
   autoDestroy: true
  }),

 sortable: true,
 autoWidth: false,
 region: 'center',
 stripeRows: true,
 autoScroll: true,
 border: true,
 width: 225,

 columns: [
  {header: 'command', width: 150, sortable: true},
  {header: 'date', width: 70, sortable: true}
 ]
});

var exploits_tree = new Ext.tree.TreePanel({
 border: true,
 region: 'west',
 width: 200,
 useArrows: true,
 autoScroll: true,
 animate: true,
 containerScroll: true,
 rootVisible: false,
 root: {nodeType: 'async'},
 dataUrl: '/ui/modules/select/exploits/tree',

 listeners: {
  'click': function(node) {
  }
 }
});

var exploits = new Ext.Panel({
 id: 'beef-configuration-exploits',
 title: 'Auto-Exploit',
 region: 'center',
 split: true,
 autoScroll: true,
 layout: {
     type: 'border',
     padding: '5',
     align: 'left'
 },

 items: [exploits_tree, exploit_commands, exploits_details_panel]
});

Here ‘var exploits’ is my main panel containing the three other sub panels.

The ‘exploits_tree’ is the tree list containing some elements. When you click on one of the elements the grid ‘exploit_commands’ gets populated and when you click in one of the populated elements, the ‘exploits_details_panel’ panel gets generated.

How can I set a fixed width on ‘exploit_commands’?

Thanks for your time.

Answer 1

The center region cannot, according to the docs, have a fixed width (see the first bullet point under the Notes heading). Any other region (N, S, E or W) may define its size, and the center region simply takes up whatever space is left over. BTW, this is pretty much a standard approach for this style of layout in other GUI platforms too (or think of just about any graphical IDE you’ve used as an example).

Don’t set auto width on your east panel, give it a defined starting width (otherwise it will not show, which is probably what you’re seeing).