Ext Grid positioning in Viewport or something

Question

Please suggest how can I position my grids on a single page. I am trying to place 3 Grid Panels in two rows with decent space between each grid.Panel. I have three CRUD Grids populated with data from DB ( and it's store ):

var UserGrid = Ext.create('Ext.grid.Panel', { ... });

var RoleGrid = Ext.create('Ext.grid.Panel', { ... });

var Map = Ext.create('Ext.grid.Panel', { ... });

Now I want to place them in different positions like I mentioned earlier. So, I want to be able to refer to my existing Grids in the Viewport or something.

That is one part of my question. Also, I am really so annoyed by the ExtJS documentation on Sencha. I know many people say it is elaborate. I am very confused what configs or properties or methods I use in each Ext JS object. The documentation does detail them, but I am not able to get hold of when to use what. When do we use options given in 'config'? When do we use options given in 'properties'. When do we use options given in 'events'? More importantly how do we use them !!

Answer 1

You need to look how layout system works in ExtJs: http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers

For your particular case I think you would need to configure viewport with border layout, put your first grid into center region, and create a container for other two grids in the south region.

Also I'd recommend to specify what version of ExtJs you're using.

UPDATE:

So normally you would have somewhere in your viewport definition:

layout: 'border'
items: [{
   xtype: 'panel', // This your UserGrid
   region: 'center',
   ... 
}, {
   xtype: 'container',
   region: 'south',
   layout: 'vbox',
   items: [{
      xtype: 'panel', // This your RoleGrid
      flex: 1
      ...
   }, {
      xtype: 'panel', // This your Map
      flex: 1
      ...
   }]
   ... 
}]

This will be true if you don't have special variables for grid (i.e. if you will not create them manually but let ExtJs create them for you.

Now, if you have any special logic or configuration inside these grids, then you might define your own classes and inherit them from standard panel/grid. In this case you obviously change xtype: 'panel' in the code above with proper xtype for your class.

If you want to create grids beforehand (there are might be some reason for that, but I rarely do so) you would need to pass region configuration to your first grid when creating it:

var UserGrid =  Ext.create('Ext.grid.Panel', {
   region: 'center',
   ... 
}); 

And then change the viewport code to something like this:

layout: 'border'
items: [userGrid, {
   xtype: 'container',
   region: 'south',
   layout: 'vbox',
   items: [RoleGrid, Map]
   ... 
}]

Answer 2

As already said, you have to learn to uses the different layouts. See this demo to get an idea of what's available.

Now, regarding the structure of the doc, 'configs', 'methods', 'properties', and 'events' are really three different concepts, but only config is specific to Ext. The others are general object oriented concepts.

In a nutshell:

• Properties are the variables that are bound to on object. In the context of Ext, they are almost always read-only. That don't means that you can't change their value (impossible to prevent in Javascript), but that you shouldn't. So you use poperties to read information from existing objects. For example:

  if (checkbox.checked) { ... }
  

• Config options are the option that you can use when you create an object. Almost all constructors in Ext accept one single argument, an object called the config object. So you use config options when you create an object:

  Ext.create('Ext.window.Window', {
      width: 200,
      height: 200,
      ...
  });
  

• Methods is the name given to functions that belongs to an object. Unlike properties, when you use a method, code is running, so that's what you use for doing things.

  window.show();
  // using the animate parameter
  window.show(true);
  

• Events are things that happen in the application. You can react to them by attaching listeners (also named callback functions) to them. The parameters that are given for events in the doc are the one that will be passed your callback method.

  // E.g. displaying an alert when a button is clicked
  button.addListener(
      // name of the event
      'click',
      // the callback function
      function() {
          alert('Clicked!');
      }
  )