panel 组件
布局为 top组件 content组件 bottom组件
1、contents组件形成多内容页
2、bottom组件添加buttonGroup组件形成多按钮
3、buttonGroup组件中的button组件通过 target关联contents组件中的content组件，实现内容也与按钮关联
默认选择已选定的组件，选择buttonGroup组件的select组件选中默认组件的id
<a component="$UI/system/components/justep/button/button" class="btn btn-default btn-icon-top" label="动态" xid="bynBtn" icon="linear linear-map" target="content7">
4.panel组件形成上中下等格局
titleBar组件，除了设置显示的固定头部，还设置苹果颜色特有的状态栏颜色
6.嵌入组件
在content组件嵌入W文件windowContain组件 src./xx.w
<div component="$UI/system/components/justep/windowContainer/windowContainer" class="x-window-container" xid="windowContainer1" src="./multi-list.w" autoLoad="true"></div>
7.数据组件
增加数据先设置列
model组件 data组件，设置组件列，编辑列，添加商品id fing ，数据组件是一个二维表，先设置列，再编辑数据
8.获取静态数据
json数据 ，img路径
data组件autoLoad =true 将数据进行自动下载
可以自己在js设置方法进行数据 ，在data属性是有一个onCustonRefresh
使用ajax进行数据请求
url require.Url();
event.source.loadData(data);
将Json数据组件中的数据可以导入到数据组件中
数据组件中数据同样也可以导出，格式也是json
//组件的自动刷新
Model.prototype.goodsDataCustomRefresh =function (event){
//转化为相对路径
var url=require.toUrl("./json/goodsData.json");
alert(url);
//ajax设置为同步请求
$.ajaxSettings.async=false;
$.getJSON(url,function(data){
//将返回的data装载在data组件中
event.source.loadData(data);
});
}
9.List组件进行页面加载
scrollview滚动页面可以自适应加载数据，测试静态数据加载，当连接数据库进行可以自适应加载
显示添加list组件<li>组件<img>组件加载
<div class="x-panel-content x-scroll-view" xid="content11" _xid="C8F3EEAB140000018DF011D095001720"><div class="x-scroll"
component="$UI/system/components/justep/scrollView/scrollView" xid="scrollView1"> <div class="x-content-center x-pull-down container" xid="div1"> <i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i5"></i> <span class="x-pull-down-label" xid="span5">下拉刷新...</span></div> <div class="x-scroll-content" xid="div2"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list5" data="goodsData"> <ul class="x-list-template" xid="listTemplateUl5"> <li xid="li5"><img src=" " alt="" xid="image1" bind-attr-src=' val("fimg")' style="width:100%;"></img></li></ul> </div></div> <div class="x-content-center x-pull-up" xid="div3"> <span class="x-pull-up-label" xid="span6">加载更多...</span></div> </div></div>
List组件设置绑定data
！！！！，出错了，最后一组数据无逗号
[
{"id": "99",
"fimg":"pic/0.png"},
{"id": "100",
"fimg":"pic/1.png"},
{"id": "101",
"fimg":"pic/2.png"},
{"id": "102",
"fimg":"pic/3.png"}
]
<div component="$UI/system/components/justep/list/list" class="x-list" xid="list5" data="goodsData">
bind-sttr-src设置对应data组件的属性
选择图片，需要选择当前行
<ul class="x-list-template" xid="listTemplateUl5"> <li xid="li5"><img src=" " alt="" xid="image1" bind-attr-src=' val("fimg")'></img></li></ul>
列表组件封装了ul组件，凡是可以在ul li上面的样式都可也设置在listTmplateUI和li上，达到相同的效果
10.双列列表
BootStrap栅格系统
将屏幕分为12列，在class属性设置col-xs-6 col-xs-4 col-xs-3
<li xid="li1" class="col-xs-3">
使用搜索功能，使用页面调用功能，从json文件读取数据放入data组件中
search.w 组件设置 content组件添加list组件li组件下面添加media组件，使用media的left组件，使用属性bind-attr-src组件关联图片和mediabody组件设置，
h4组件bind-text组件设置val（）属性。在添加span组件，bind-text组件进行绑定，设置的val（）属性
<div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="ListData"> <ul class="x-list-template" xid="listTemplateUl1"> <li xid="li1" class="col-xs-3"><div class="media" xid="media1"> <div class="media-left" xid="mediaLeft1"> <a href="#" xid="a1"> <img class="media-object" src="" alt="" xid="image1" bind-attr-src=' val("fImg")' height="20%"></img></a> </div> <div class="media-body" xid="mediaBody1"> <h4 class="media-heading" xid="h41" bind-text=' val("fClassName")'>Media heading </h4> <span xid="span2" bind-text='val("fDescription")'></span></div> </div></li></ul> </div> </div>
11. 嵌套列表
list渲染数据，进行过滤显示
过滤内嵌list组件过滤条件 $row.val("foodid")==val("id") 计算行==val("id") 外嵌列
实现过程
<div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="cartShopData"> <ul class="x-list-template" xid="listTemplateUl1"> <li xid="li1"><div component="$UI/system/components/justep/row/row" class="x-row" xid="row1"> <div class="x-col" xid="col1"></div> <div class="x-col" xid="col2"><span xid="span1" bind-text='val("fShopName")'></span></div> <div class="x-col" xid="col3"></div></div><div component="$UI/system/components/justep/list/list" class="x-list" xid="list2" data="cardGoodsData" filter='$row.val("fShopID")== val("id")'> <ul class="x-list-template" xid="listTemplateUl2"> <li xid="li2"><span xid="span3" bind-text='val("fTitle")'></span></li></ul> </div></li></ul> </div></div>
12.复杂列表
使用行组件，
row垂直居中，列宽自适应大小，默然添加3行
点击列x-col-fixed自适应样式 x-col-center 垂直居中样式 width：auto
商品列表作为内嵌列表，row行里面有col，col列里面有行row，可以无限嵌套，实现复杂界面
13.checkBox复选框使嵌套 列表显示
checkbox作为一列，在data组件新增列计算列fCheck默认 checkvalue=1选中为1，onChange双击点击事件 选中事件
Model.prototype.checkShopIDChange = function(event){ //listrow 自动生成 checkbox所在的list的行 var row =event.bindingContext.$object; //通过列获取shopID，选中行的取值方法，获取商铺表id， var shopID=row.val("id"); //使用商铺id去查询商铺下所有商品，获得对象，调用方法，find(表名属性列，查找的值为shopID)获得数组 var rows=this.comp("cardGoodsData").find(['fShopID'],[shopID]); //遍历数组，给每一行赋值，取消或选中全部商品 for(var i=0;i<rows.length;i++){ rows[i].val('fCheck',event.value); } }; Model.prototype.checkGoodIDChange = function(event){ var row = event.bindingContext.$object; var shopID=row.val("fShopID"); // var rows=this.comp("cardGoodsData").find(['fShopID','fCheck'],[shopID,1]); //计算选中行的值，进行修改 var rowsNum=rows.length; if(event.checked) rowsNum++; else rowsNum--; if(rowsNum>0) //获取对象设置shopID这行的fCheck为1，设置选商品为选中 this.comp("cartShopData").setValueByID('fCheck',1, shopID); else this.comp("cartShopData").setValueByID('fCheck',"", shopID); };
展现组件的值来自数据组件中的数据，不需要修改展现组件的数值，修改数据组件中的数据就可以了，
好处是，1.只需要掌握数据组件的用法，2，更换数据组件不需要修改相关代码
3.数据组件是页面组件的核心，展现组件是面向数据组件的。
赋值、取值val（）购物车数量加减操作
Model.prototype.addBtnClick = function(event){
var row = event.bindingContext.$object;
row.val('fNumber',row.val('fNumber')+1);
};
Model.prototype.subBtnClick = function(event){
var row = event.bindingContext.$object;
if(row.val('fNumber')>1)
row.val('fNumber',row.val('fNumber')-1);
};
14.span组件 bind-visible属性
显示折扣信息，原价大于110显示
<span xid="span2" bind-text='"原价￥" + val("fOldPrice")' style="color:#C0C0C0;" bind-visible=' val("fOldPrice") >110'></span>
常用绑定属性
bind-style，bind-css控制显示样式
bind-visible 控制组件是否显示
bind-text 控制组件显示文本
15.过滤表达式，二级列表过滤
传参使用参数过滤列表
分类表showpage打开页面，在Js中访问model对象使用this，比如this.params.rootID，在属性设置使用model对象使用$model,比如$model.params.rootID
//点击list组件的click事件
Model.prototype.list1Click = function(event){
//不在使用listrow，点击数据已经成数据当前行,row 发生的事件比较早
var rootID=this.comp("ListData").val("id");
//打开页面，传递参数
justep.Shell.showPage(require.toUrl("./rootClass.w"),{"rootID":rootID});
};
传输页面，在另一个页面使用model组件里面onParamsReceive进行数据传递接收
Model.prototype.modelParamsReceive = function(event){
// alert(this.params.rootID);
};
在list组件使用过滤事件.列表组件的数据不等同于数据组件中的数据，，列表组件中的数据可以是一个数组，也可以是数据组件中的一部分数据，使用过滤组件，进行过滤处理
<div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="secondClassData"
filter=' $row.val("rootID") ==$model.params.rootID'>
数据组件的规则表达式
增加列，编辑规则，计算按钮，金额是否选中
先判断商品是否选中，选中计算金额，为选中金额设置为0，
<col name="fMoney" xid="ruleCol1"> <calculate xid="calculate1"> <expr xid="default1">$row.val("fCheck")==1? $row.val("fPrice") * $row.val("fNumber") : 0</expr></calculate> </col>
计算商铺总金额求和，判断是否属于同一个商铺，相等进行fMoney相加
<col name="fSumMoney" xid="ruleCol2"> <calculate xid="calculate2"> <expr xid="default2">$model.cardGoodsData.sum("fMoney",function(ev){
//计算规则sum方法，回调函数 判断data数据行的值是否与当前行id是否相等，返回true或false return ev.row.val('fShopID') == $row.val("id") })</expr></calculate> </col> <col name="fSumConut" xid="ruleCol3">
计算样品种类，在商品编辑规则，计算种类总计
<col name="fSumConut" xid="ruleCol3"> <calculate xid="calculate3"> <expr xid="default3">$model.cardGoodsData.sum("fCheck",function(ev){ return ev.row.val('fShopID') == $row.val("id")})</expr></calculate> </col>
数据组件才是规则属性，通过设置规则表达式控制整个数据集的只读，或者某个列的只读、必填、计算、计算公式、约束规则
数据组件是页面的核心
