CustomPanel

简介

custompanel 是自定义面板控件,custompanel 是独立于 page 外的控件,它可以被设定成一个有规律的布局与属性,因此可以认为简单认为它是一种新的控件,然后就可以通过JS代码,把它加入已有的 page 或其他容器控件中,重复利用。

使用方法

  • 创建 custompanel

点击菜单栏的 文件 -> 新建 -> 自定义面板,然后会弹出一个小窗口其中的名称设置为 "item.ui" 点击确定即可。

创建custompanel

  • 自定义布局

打开 cunstompanel 的布局页面,对 custompanel 进行布局规划

示例如下:

布局

属性设定如下:

属性

以下是在 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属性修改掉
    }
})
效果如下:

效果