Webix学习笔记-创建一个基本应用程序-01-设置组件

- 日理万妓 2022-01-14 18:55 200阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

这里我们创建一个简单的电影布局，在电影的列表中，我们可以添加元素。

布局内容如下

*  一个电影列表
 *  一个用来添加电影信息的表单
 *  一个操作增加删除的工具栏

下面就开始这个页面布局

## 第一步：入门 ##

在script中建立一个空白的页面，代码如下

<script type="text/javascript" charset="utf-8">
    webix.ui({
    });
    </script>

如果需要确保页面加载完成之后再加载webix的内容，也可以使用webix的ready方法

<script type="text/javascript" charset="utf-8">
    webix.ready(function(){
        webix.ui({
            ......
        });
    });
    </script>

## 第二步：编辑行 ##

把整个页面分成上下两行，上面的行放置操作按钮，下面的行放置内容。设置页面的宽度为500px，代码如下

webix.ui({
        width:500,
        rows: [
            { template:"Row 1" }, //1st row
            { template:"Row 2" }  //2nd row
        ]
    });

刷新页面就可以看到效果。如果让两行占满整个页面，只需要删除width属性就可以了

## 第三步：编辑列 ##

将下面的行也就是Row 2分割成左右两列，左边用来放置表单，用来录入电影信息。右边放置一个列表，用来显示信息内容

webix.ui({
        width:500,
        rows: [
            { template:"Row 1" },
            { cols:[
                { template:"Column 1" },//1st column
                { template:"Column 2" } //2nd column
            ]}
        ]
    });

再刷新页面可以看到分割效果

## 第四步：增加操作按钮 ##

*  在上面的行中放置一个toolbar工具栏，在工具栏中增加一个增加按钮和一个删除按钮
 *  给按钮设置值
 *  给按钮设置宽度属性

代码如下:

## 第五步：增加表单 ##

在页面左下的区域中增加一个表单，表单中包含标题和年份两个属性

## 第六步：增加列表 ##

*  在页面右下的区域中增加一个电影信息列表
 *  使用json数据填充列表数据
 *  显示标题和年份信息

代码如下

webix.ui({
        width:500,
        rows: [
            { view:"toolbar", elements:[
                { view:"button", value:"Add",    width:100},
                { view:"button", value:"Delete", width:100 }
            ]},
            { height:120, cols:[
                {view:"form", elements:[
                    { view:"text", placeholder:"Title"},  
                    { view:"text", placeholder:"Year"}     
                ]},
                {view:"list", 
                    template:"#title# - #year#", // which data to show
                    select:true, //enables selection 
                    height:400,
                    data: [
                        { id:1, title:"The Shawshank Redemption", year:1994},
                        { id:2, title:"The Godfather", year:1972},
                        { id:3, title:"The Godfather: Part II", year:1974},
                        { id:4, title:"The Good, the Bad and the Ugly", year:1966},
                        { id:5, title:"My Fair Lady", year:1964},
                        { id:6, title:"12 Angry Men", year:1957}
                    ]
                } 
            ]}
        ]
    });

刷新页面就可以看到页面展示的效果了

转载于:https://my.oschina.net/65304586/blog/168503

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/0a762294c85e46fd9e5c8c7c0e91971d.png