smartClient 3--布局

Posted 2020-10-15 霓好

一、组件的布局（如何将组件按照想要的方式进行布局，如左右布局，上下布局等等，这里是大框架下的整体布局）

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"       //控件对齐方式