smartClient 3--布局
一、组件的布局(如何将组件按照想要的方式进行布局,如左右布局,上下布局等等,这里是大框架下的整体布局)
- HLayout 水平
- VLayout 垂直
- HStack 水平但是width不管
- 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" //控件对齐方式
原创博客,欢迎讨论,转载请注明出处、链接