laszlo grid自定义

最新推荐文章于 2020-12-19 09:13:40 发布

原创最新推荐文章于 2020-12-19 09:13:40 发布 · 104 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用canvas实现的网格下载器UI布局方案。该布局包括背景、白色背景、表头及行容器等元素，并支持滚动条。每个数据行显示ID、名称、描述、分类和链接等内容。

<canvas width="800" debug="true">
<class name="downloadgrid" datapath="" width="510" height="200">
<view name="bg" width="$once{parent.width}" height="$once{parent.height}" bgcolor="#666666"/>
<view name="whitebg" x="1" y="1" width="$once{parent.width-2}" height="$once{parent.height-2}" bgcolor="#FFFFFF"/>
<view name="header" x="1" y="2" width="$once{parent.width-2}" height="18" bgcolor="#87CEFA">

<text x="0" text="ID" />
<text x="40" text="名称" />
<text x="174" text="描述" />
<text x="344" text="分类"/>
<text x="434" text="链接" />
</view>
<view name="rowcontainer" x="1" y="20" datapath="${parent.datapath}" width="$once{parent.width-2}" height="$once{parent.height-22}" clip="true">
<view name="columns" datapath="${parent.datapath}" width="$once{parent.width-2}">
<simplelayout axis="y" spacing="1"/>
<view datapath="*" width="$once{parent.width}" height="18" bgcolor="#F5F5F5">
<text x="0" datapath="@id" width="38"/>
<text x="40" datapath="@name" width="130"/>
<text x="174" datapath="@describe" width="166"/>
<text x="344" datapath="@category" width="76"/>
<text x="434" datapath="@status" width="80" fgcolor="#0000ff">
<method event="onclick">
var hashref = parent.datapath.p.hasAttr('href');
if(hashref){
var address = parent.datapath.p.getAttr('href');
LzBrowser.loadURL(address, '_blank')
}
</method>
<method event="onmouseover">
this.setColor(0x000000);
</method>
<method event="onmouseout">
this.setColor(0x0000FF);
</method>
</text>
</view>
</view>
<scrollbar/>
</view>
</class>