1. 程式人生 > >smartClient 3--布局

smartClient 3--布局

自動 int hid 自動調整 col stack 適應 對齊 是否

一、組件的布局(如何將組件按照想要的方式進行布局,如左右布局,上下布局等等,這裏是大框架下的整體布局)
  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"       //控件對齊方式    

smartClient 3--布局