smartClient 3--布局

一、组件的布局(如何将组件按照想要的方式进行布局,如左右布局,上下布局等等,这里是大框架下的整体布局)
  1. HLayout  水平
  2. VLayout   垂直
  3. HStack     水平但是width不管
  4. VStack     垂直但是width不管
    isc.HLayout.create({
       ID: "pageLayout",
       width: "100%",
       height: "100%",
       membersMargin: 10,        //members之间的margin
       layoutMargin: 10,         //layout周围的margin
       members: [                                                      //members可以是组件的引用,也可以是在线create,组件成员也可以嵌套layout布局
          isc.Label.create({
              layoutAlign: "left | right | top | bottom | center",    //member(这里指组件)对其方式
              showResizeBar: true | false,                            //member之间是否显示 调整大小栏
              width: 100,        
    //注意,layout管理器不会根据layout自身大小(即container大小)自动调整members的大小(即不会自适应)
    //如果内容(这里指members)撑开layout,将会自然状态撑开,所以可以根据所需设置overflow(hidden | visible | scroll | auto)
    height: 100 }), isc.Button.create() ] });

     

members中的容器组件(container components)
    a.    SectionStack    是分装用户可扩展、可折叠的组件的容器
    b.    TabSet            是分装tabs组件的容器
    c.    Window           是分装模拟window特性(可拖动,可resize)的组件的容器
 
二、表单的布局(如何进行表单中label、controls的行列布局)注意:这里表单布局类似HTML中的table,分成行和列,以grid网格的形式呈现
    1、表单布局属性    
     numCols    总列数(label和控件各占一列呈水平布局,所以通常设置总列数是 2*n)
        titleWidth    title 即 label 的宽度
        colWidths    可选,所有列的宽度(数组形式),如果设置,则会覆盖表单布局自动计算的每个col的宽度    

 

   
    2、field字段属性
        colSpan                                // int,跨列 
        rowSpan                               //int,跨行
        startRow: true | false              //是否应该开始新行
        endRow: true | false               //是否应该结束行
        showTitle: true | false             //控件是否显示label
        align: "left | right | center"       //控件对齐方式    

 

       
 
 
 
 
posted @ 2017-11-25 22:48  HelenJ  阅读(429)  评论(2编辑  收藏  举报