sencha touch常用面板 容器内部组件的停靠

 

 

 
 /*********************6. 容器内部组件的停靠**********************************/
 
 //docked:表示在面板上停靠,可选值:top,bottom,left,right,分别代表停靠在外部容器组件的上面,底部,左边,右边
 var panel6=Ext.create('Ext.Panel',{
  id:'panel6',
  layout:{
   type:'hbox',
   align:'stretch'//指定容器中子组件的垂直对齐方式,默认值是center,表示子组件的纵向对齐方式是中央对齐
  },
  items:[
   {
    docked:'top',
    height:50,
    style:'background-color:pink;text-align:center;',
    html:'顶部显示'
   },
   {
    flex:1,//当使用水平盒布局方式时,该配置选项用来指定每一个子组件的宽度
    html:'子组件1',
    style:'background-color:#5a937c'
    
   },{
    flex:2,
    html:'子组件2',
    style:'background-color:#5E89ff'
   }
     
     
  ]
       
 });
 
 
    Ext.Viewport.add(panel6);