extjs layout fit LearningExtJS（FourthEdition）

extjs layout fit LearningExtJS（FourthEdition）

The

One of the of the Ext JS is the to in an easy way. We can fixed or fluid using the right .

At this point, you know how a works. We can the of a by a . If we don't a to our , by the auto will be used. In our , we used the auto and as we could see, the or HTML are one after .

There are many we can use to our , such as , cards, , and so on.

We can find all the in the Ext.. . Go to the and look into the enum class: .

Here we will see many , each a type of . Some of the most are:

The

The pides the space into five ( panes): north,southextjs layout fit, west,east, and . We can place our in any of the , but we are to use the .

In the code, we will the as . We will also the , west, and south for the :

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel', {
    width: 500,  height: 300,
    title:  'Border Layout',
    layout: 'border',
    items: [{
      xtype: 'panel',
      title: 'South Region is resizable',
 region: 'south', // region
      height: 100,
 split: true // enable resizing
    },{
      xtype: 'panel',
      title: 'West Region',
 region:'west', // region
      width: 200,
 collapsible: true, //make panel/region collapsible
      layout: 'fit',
 split: true // enable resizing
    },{
      title: 'Center Region',
 region: 'center',
      layout: 'fit',
      margin: '5 5 0 0',
      html:'Main content goes here'
    }],
    renderTo: Ext.getBody()
  });
});

We have made the West a panel. If we click on the small arrow in the or in the bar, we'll see that the panel will to the left-hand side. Also, we have our South panel to be split. This us to the South panel by the bar with our mouse.

Note

You can place (s) that a in order to avoid over- of .

The Fit

This is to be used for only one child. It us to the inner to the size of the . The child takes all the space in the . When the is , the child size is too to fit the new . Let's make the code for this :

Ext.onReady(function(){
  var win = Ext.create("Ext.window.Window",{
    title: "My first window",
    width: 300,
    height: 200,
    maximizable: true,
 layout: "fit",
    defaults: {
    xtype: "panel",
    height: 60,
    border: false
    },
    items: [
    {title: "Menu", html: "The main menu"},
    {title: "Content", html: "The main content!"}
    ]
  });
  win.show();
});

In the code, we only added the . In this case, we're a with the name of the , but we can also set an and some for the . In fact, every is a class that .

The shows how the fit the of the :

As you can see,even we two to theextjs layout fit, it only shows one. If we the main ,we see that the Menu panel is to fit the new size of the .

The Card

The Card can childextjs layout fit LearningExtJS（FourthEdition）,so if we need to a or only one at a timeextjs layout fit, we use this . This the fit class, which means that only one can be at any given time and will fill all the space in the .

We can also set the by its index using the index from the items array. And we can move the by the next or prev . Let's check out the code for the Card :

Ext.onReady(function(){
  var win = Ext.create("Ext.window.Window",{
    title: "My first window",
    width: 300,
    height: 200,
    maximizable: true,
 layout: "card",//Step 1
    defaults:{ xtype: "panel", height: 60, border: false },
    items: [{
      title: "Menu",
      html: "The main menu"
    },{
      title: "Content",
      html: "The main content!"
    }]
  });
  win.show();
  setTimeout(function(){
 win.getLayout().setActiveItem(1); //Step 2
  },3000);
});

The code a with two . We set the of the to card in step one.

In step two, we get the by the after 3 and the item using the (1) to show the panel. We can also use the prev and next from the to show the next and card.

The

to the Card , this us to show one at a time in an style. We will see the of the inner and we're going to be able to and the by on their title bars. Let's check the code for the :

var win = Ext.create("Ext.window.Window",{
  title: "My first window",
  width: 300,
  height: 200,
  maximizable: true,
 layout: "accordion",
  defaults: { xtype: "panel" },
  items:[
    {title: "Menu", html: "The main menu" },
    {title: "Content", html: "The main content!" },
    {title: "3rd Panel", html: "Content here...!" }
  ]
});

the code, we have only / the and added a new panel to the items array. We'll see like the :

When using the , we'll see only one panel at a time. The panel will take the to be . It doesn't if we the .

Note

In the ,it is to point out that we only need to use the Ext.panel.Panel class or of the Ext.panel.Panel class.

The

This the of (child ) to the 's . If the is, then the child will be to the rules to these child .

By ,will based on the size of the . But if the is using theextjs layout fit LearningExtJS（FourthEdition）, it will an - of . If the is , the will use it as a for the of the based on it the .

Let's make some to the and set the code like this:

 Ext.onReady(function(){
  var win = Ext.create("Ext.window.Window",{
    title: "My first window",
    width: 300,
    height: 300,
    maximizable : true,
    layout: "anchor",
    defaults: {xtype: "panel", height: 60, border: false},
    items: [
    {
      title: "Menu",  html: "panel at 100% - 10 px", anchor:'-10'
    },{
      title: "Content", html: "panel at 70% of anchor",  anchor:'70%'
    },{
    title: "3rd Panel", html: "panel at 50% width and 40% height of anchor", anchor:'50% 40%', bodyStyle:'background-color:#fc3;'
    }
    ]
  });
  win.show();
});

The will look like the :

When we use the with only one value, will be used on the width of the ,for, :'70%' will cover 70% of the 's width. Using :'-10' will cover 100% minus 10 of the 's width. , when using two , the will be to the width and as in the last panel from the code: :'50% 40%'.