布局容器相关重点 

 1 Ext.application({
 2             name : 'testApp',
 3             launch : function() {
 4                 var testPanel =Ext.create('Ext.panel.Panel',{
 5                     renderTo: Ext.getBody(),
 6                     width:400,
 7                     height:200,
 8                     x:300,
 9                     y:300,
10                     //If true, suspend calls to doLayout. Useful when batching multiple adds to a container and not passing them as multiple arguments or an array.
11                     suspendLayout:true,
12                     title:'testPanel',
13                     layout:'column'
14                 });
15                 testPanel.add({
16                     xtype:'panel',
17                     width:199,
18                     height:100,
19                     html:'panel 1'
20                 });
21                 testPanel.add({
22                     XTYPE:'panel',
23                     width:199,
24                     height:100,
25                     html:'panel2'
26                 });
27                 testPanel.suspendLayout=false;
28                 /**
29                  * 框架内部调用doLayout()方法来计算父容器中所有子元素的尺寸和位置并更新dom
30                  * doLayout()方法是递归调用的，因此容器中的所有元素都将调用该方法，直到最底层元素
31                  * 一旦动态添加或者删除某个元素时，框架将重新调整大小，从而自动调用doLayout()方法
32                  * 然而某些情况下我们不需要立即更新，可能要在批量添加或者删除元素后才执行更新操作
33                  * 因此就采用suspendLayout来禁止框架自动调用doLayout()方法
34                  * 而在执行完我们想要的操作后，要将suspendLayout重新置为false，并手动调用doLayout()方法
35                  */
36                 testPanel.doLayout();
37             }
38         })

 

posted on 2014-07-09 17:04  遠樹  阅读(154)  评论(0)    收藏  举报

导航