CustomPanel¶
简介¶
custompanel
是自定义面板控件,custompanel是独立于page外的控件,它可以被设定成一个有规律的布局与属性,因此可以认为简单认为它是一种新的控件,然后就可以通过JS代码,把它加入已有的page或其他容器控件中,重复利用。
使用方法¶
- 创建
custompanel
点击菜单栏的 文件 -> 新建 -> 自定义面板
,然后会弹出一个小窗口其中的名称设置为"item.ui"点击确定即可。
- 自定义布局
打开cunstompanel
的布局页面,对custompanel
进行布局规划
示例如下:
属性设定如下:
- 载入
custompanel
通过在其他page
的JS脚本中,通过代码带入custompanel
,具体API请查看SetDataAPI文档
以下是在listctrl
中,加入多个custompanel
的示例代码:
this.setData ({ listctrl1 : //listctrl1 为列表控件的名称 { page : this, xml : 'Panels/item', //`item` 为自定义面板的名称 items :[{imagebox1 : "1.png", label1 : "1.png"}, {imagebox1 : "2.png", label1 : "2.png"}, {imagebox1 : "3.png", label1 : "3.png"}, {imagebox1 : "4.png", label1 : "4.png"}, {imagebox1 : "5.png", label1 : "5.png"}, {imagebox1 : "6.png", label1 : "6.png"}, {imagebox1 : "7.png", label1 : "7.png"}, {imagebox1 : "8.png", label1 : "8.png"}, {imagebox1 : "9.png", label1 : "9.png"}] //imagebox1` 和 `label1` 分别为加入到自定义面板中的对应控件的名称。 //但这样做有个后遗症,控件内存在多个重名控件,因此在设定Items的时候,可以把imagebox1与label1的id属性修改掉 } })