Extjs4 step by step (II) -- ext interface (container and layout)

Container

An ext interface consists of many ext components, and the container is responsible for controlling the size and positioning of each component. The container itself is also one of the ext components. It can also be considered as a special component for storing other components.

The most common container is panel. Next we will define a panel.

First, the definition method

Ext4.x differs from the previous method in declaring a new component. In 3.x, the declaration method is:

VaR Panel = new Ext. Panel (....), In ext4.x, there are two basic methods to declare a component:

// Ext. Create ('ext. Panel. Panel ', {Title: 'welfare Housing Business process', width: 200 ,................. }); // Ext. widget ('panel ', {Title: 'ccc', width: 100, height: 100 })

The difference is that the widget method uses an abbreviation that is easier to remember, that is, xtpye. In API, almost every component has an xtype. The view method is as follows:

In actual coding, the declared component is assigned to a variable, which is easier to operate, such:

VaR fwdz = ext. create ('ext. form. field. text', {fieldlabel: 'House address <SPAN class = \ "colorred \" \> * </SPAN \> ', name: 'fwdz '});

 

Write a basic panel

Directly run the Code:

VaR mainpanel = ext. create ('ext. panel. panel ', {Title: 'My workstation', border: 1, padding: 5, // layout: 'column ', autoscroll: True, HTML: "<div> ccccccccccccccccc </div>"}); Ext. onready (function () {mainpanel. render (ext. getbody ());});

OK. Why? Is it easy? Okay. Let's define a few more panels:

VaR mainpanel = ext. create ('ext. panel. panel ', {Title: 'My workstation', border: 1, padding: 5, layout: 'column', autoscroll: True, items: [{padding: 5, ID: 'dbsy ', xtype: 'panel', Title: 'to-Do List', width: '000000', height: '000000', HTML: '<Div class = "Portlet-content"> ccccccccccc </div>'}, {padding: 5, width: '000000', xtype: 'panel ', ID: 'wdyx', Title: 'My mailboxes ', height: '000000', HTML:' <Div class = "Portlet-content"> ccccccccccccc </div> '}, {padding: 5, width: '123', xtype: 'panel ', ID: 'zzcl', Title: 'processing ', height: '123', HTML: '<Div class = "Portlet-content"> ccccccccccc </div>'}, {padding: 5, width: '000000', ID: 'tzgg ', xtype: 'panel ', Title: 'notification bulletins', height: '20140901', HTML: '<Div class = "Portlet-content"> ccccccccccc </div>'}]}); Ext. onready (function () {mainpanel. render (ext. getbody ());});

On the basis of the original "My workbench", four more panels were added. Here I used layout: 'column 'layout. When Column Layout is used, it will typeset the column for the percentage of its sub-elements. If two columns are required, the child element's widt attribute is set to "50%". If three columns are required, the corresponding child element is set to "width: 33% ". In the demo above, I set the width of the child element on the left to "49%" to separate the two panels. Of course, there is another way to achieve this. If you set the property "margin: '0 5px 5px 0'", the element will be separated by "5px" on the right and below ". As follows:

 

We can also define its sub-elements outside mainpanel, and then add the following code:

VaR tzgg = ext. create ('ext. panel. panel ', {padding: 5, width: '000000', Title: 'announcement notification', height: '20140901', HTML: '<Div class = "Portlet-content"> ccccccccccc </div>'}) // defines a panelvar mainpanel = ext. create ('ext. panel. panel ', {Title: 'My workstation', border: 1, padding: 5, layout: 'column', autoscroll: True, items: [{tzgg, xxxx, ......}] // Add other defined components here}) Ext. onready (function () {panel. Render (ext. getbody ());});

I personally prefer this writing method and have a clearer idea. In particular, when writing forms with many forms, you can assign tasks to multiple users.

 

Diverse la s

EXT provides a wide range of layout methods, but we will not explain them one by one here. With the above examples, we should understand its basic principles. Other layout methods are similar.

In ext APIs, the layout method is listed. You can find the layout in slices.

Tool bar of panel

You can add a large number of tool buttons in the upper right corner of the Panel, which are defined by the tool attribute:

VaR Panel = ext. create ('ext. panel. panel ', {Title: 'My workstation', border: 1, padding: 5, // layout: 'column ', height: 200, autoscroll: True, tools: [{type: 'toggle ', Handler: function () {// click the event to write in the panel. body. mask ('loading the page... ') ;},{ type: 'close'}, {type: 'minisize'}, {type: 'maxilisize'}, {type: 'restore '}, {type: 'gear '}, {type: 'pin'}, {type: 'unpin'}, {type: 'right'}, {type: 'left '}, {type: 'lowdown '}, {type: 'refresh'}, {type: 'minus'}, {type: 'gal'}, {type: 'help '}, {type: 'search'}, {type: 'save'}, {type: 'print'}], HTML: '<Div class = "Portlet-content"> ccccccccccc </div> '})

The clicked event is written in the handler method. As follows:

 

Sorry

I have been busy and working overtime every day. As a result, I haven't updated it for a long time. I have failed to provide your support. It will be sorted out during the holidays and put together later. The previous content will also be adjusted and changed.