动态创建的controlGroup如何设置title和可折叠属性

justep_wex5new

采用html方式动态创建的controlGroup如何去设置可折叠属性

liangyongfei

动态创建组件的方法是
http://doc.wex5.com/comp-base/#2.2

new controlGroup 的时候  指定参数

collapsible
和
collapsed  
就可以了！

justep_wex5new

liangyongfei 发表于 2017-8-3 15:09
动态创建组件的方法是
http://doc.wex5.com/comp-base/#2.2

你说的是采用第一种或者第二种动态创建组件的方式，那我采用第三种如何去控制可折叠呢？
顺便问问这样动态生成的input如何设置为日期组件来使用，format该如何加？金额类型如何加"format"="0,000.00"

以下是我的代码
                var parentNode = this.getElementByXid('content1');   
                var targetElement = this.getElementByXid('row4');   
                this.i++;
                var group=$('<div component="$UI/system/components/justep/controlGroup/controlGroup" class="x-control-group mycontrol" title="标题('+this.i+')"  collapsible="true" style="border:0;padding:0;margin:0px;background:#fff;width:100%;        border-bottom:1px #eaeff3 solid;">'+
                                        '<div class="x-control-group-title"style="font-size:14px; padding-top:0px;padding-bottom:0px;">'+
                                        ' <span>标题('+this.i+')</span></div>'+
                                   '<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30 mydate" >'+
                                    '<label class="x-label">开始日期</label>'+
                                    '<input component="$UI/system/components/justep/input/input" class="form-control x-edit mydate" style="background-color:#fff;"  format:"yyyy-MM-dd",></input></div> '+
                                   '<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30">'+
                                   '<label class="x-label">结束日期</label>'+
                                   '<input component="$UI/system/components/justep/input/input" class="form-control x-edit mydate" style="background-color:#fff;"   format:"yyyy-MM-dd",></input></div></div>');
                justep.Bind.addNode(parentNode,group[0],targetElement);

liangyongfei

justep_wex5new 发表于 2017-8-3 15:19
你说的是采用第一种或者第二种动态创建组件的方式，那我采用第三种如何去控制可折叠呢？
顺便问问这样动 ...

如果是wex5 封装的组件！必须使用动态new 的方式才可以！

非x5组件才能使用第三中方式！

controlGroup 是组件！所以必须用前两种方法生成！
input 也是组件！也不行动态new

只要有
component 属性 指定地址这种格式都是 组件！需要动态new

justep_wex5new

liangyongfei 发表于 2017-8-3 16:13
如果是wex5 封装的组件！必须使用动态new 的方式才可以！

非x5组件才能使用第三中方式！

那new组件的方式，如何去控制组件的摆放位置呢？还有如果以new组件的方式，日期组件如何动态创建呢？也是引用 var labelEdit = require("$UI/system/components/justep/labelEdit/labelEdit");

liangyongfei

justep_wex5new 发表于 2017-8-3 16:16
那new组件的方式，如何去控制组件的摆放位置呢？还有如果以new组件的方式，日期组件如何动态创建呢？也是 ...

动态创建input的时候！
指定参数dataType="DateTime"  就可以了！
或者是绑定一个日期类型的字段！

动态new的格式就是  文档中前两种写法！

你可以看下组件的源码！比如
/UI2/system/components/justep/input/input.js
组件重写了 buildTemplate 方法才能被动态new

justep_wex5new

liangyongfei 发表于 2017-8-3 17:05
动态创建input的时候！
指定参数dataType="DateTime"  就可以了！
或者是绑定一个日期类型的字段！

单独的创建input等没有问题，但是我试了动态创建labelEdit的好像不太一样，他内部的input还需要自己去创建吗？有没有labelEdit创建的示例可以看看

liangyongfei

justep_wex5new 发表于 2017-8-3 17:13
单独的创建input等没有问题，但是我试了动态创建labelEdit的好像不太一样，他内部的input还需要自己去创 ...

请看组件的　buildTemplate　　方法！指定它需要哪些参数！进行动态创建！
案例就是参考那个连接！

不过，简单的页面建议这样做！
复杂的页面不建议动态创建！

如果你想控制显示隐藏！直接通过bind-visible 或者 bind-if  控制显示隐藏就可以！

如果创建多次！还可以放在list组件中！通过data新增行，控制生成几份

justep_wex5new

liangyongfei 发表于 2017-8-3 17:24
请看组件的　buildTemplate　　方法！指定它需要哪些参数！进行动态创建！
案例就是参考那个连接！

好的，感谢，结帖