ComboList Control

Develop and Deploy Cross-Browser Web Apps .

ComboList Control

Postby joedarock » Fri Mar 10, 2017 5:03 pm

Assume an existing populated ComboList; Can you show examples of:

1) Add an item to the list
2) Remove an item from the list
3) Clear the list
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: ComboList Control

Postby support » Mon Mar 13, 2017 3:04 am

   
xui.Class('App', 'xui.Module',{
Instance:{
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};

append(
xui.create("xui.UI.ComboInput")
.setHost(host,"xui_ui_comboinput5")
.setLeft("10em")
.setTop("3.3333333333333335em")
.setWidth("18em")
.setLabelSize("8em")
.setLabelCaption("Combo")
.setType("listbox")
.setItems([{
"id":"a",
"caption":"item 1",
"imageClass":"xui-icon-number1"
},
{
"id":"b",
"caption":"item 2",
"imageClass":"xui-icon-number2"
},
{
"id":"c",
"caption":"item 3",
"imageClass":"xui-icon-number3"
},
{
"id":"d",
"caption":"item 4",
"imageClass":"xui-icon-number4"
}])
);

append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton1")
.setLeft("15.833333333333334em")
.setTop("7.5em")
.setHtml("Add an item")
.onClick("_xui_ui_htmlbutton1_onclick")
);

append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton2")
.setLeft("15.833333333333334em")
.setTop("10em")
.setHtml("Remove an item")
.onClick("_xui_ui_htmlbutton2_onclick")
);

append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton3")
.setLeft("15.833333333333334em")
.setTop("12.5em")
.setHtml("Clear all items")
.onClick("_xui_ui_htmlbutton3_onclick")
);

return children;
// ]]Code created by CrossUI RAD Studio
},
_xui_ui_htmlbutton1_onclick:function (profile, e, value){
var ns = this, comb = ns.xui_ui_comboinput5;
// clear cache
comb.clearPopCache();
var items = comb.getItems();
xui.arr.insertAny(items,["new item"],2);
comb.setItems(items);
},
_xui_ui_htmlbutton2_onclick:function (profile, e, value){
var ns = this, comb = ns.xui_ui_comboinput5;
// clear cache
comb.clearPopCache();
var items = comb.getItems();
xui.arr.removeFrom(items);
comb.setItems(items);
},
_xui_ui_htmlbutton3_onclick:function (profile, e, value){
var ns = this, comb = ns.xui_ui_comboinput5;
// clear cache
comb.clearPopCache();
comb.setItems([]);
}
}
});
   
support
 
Posts: 350
Joined: Sat Apr 27, 2013 9:22 am

Re: ComboList Control

Postby joedarock » Mon Mar 13, 2017 2:56 pm

Thanks!
How about inserting an item with an image and text styles?
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: ComboList Control

Postby support » Wed Mar 15, 2017 1:41 am

   
xui.Class('App', 'xui.Module',{
Instance:{
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};

append(
xui.create("xui.UI.ComboInput")
.setHost(host,"xui_ui_comboinput5")
.setLeft("7.5em")
.setTop("3.3333333333333335em")
.setWidth("25.833333333333332em")
.setLabelSize("8em")
.setLabelCaption("Combo")
.setType("listbox")
.setItems([{
"id":"a",
"caption":"item 1",
"imageClass":"xui-icon-number1"
},
{
"id":"b",
"caption":"item 2",
"imageClass":"xui-icon-number2"
},
{
"id":"c",
"caption":"item 3",
"imageClass":"xui-icon-number3"
},
{
"id":"d",
"caption":"item 4",
"imageClass":"xui-icon-number4"
}])
);

append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton1")
.setLeft("15.833333333333334em")
.setTop("7.5em")
.setHtml("Add items")
.onClick("_xui_ui_htmlbutton1_onclick")
);

append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton2")
.setLeft("15.833333333333334em")
.setTop("10em")
.setHtml("Remove an item")
.onClick("_xui_ui_htmlbutton2_onclick")
);

append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton3")
.setLeft("15.833333333333334em")
.setTop("12.5em")
.setHtml("Clear all items")
.onClick("_xui_ui_htmlbutton3_onclick")
);

return children;
// ]]Code created by CrossUI RAD Studio
},
_xui_ui_htmlbutton1_onclick:function (profile, e, value){
var ns = this, comb = ns.xui_ui_comboinput5;
// clear cache
comb.clearPopCache();
var items = comb.getItems();
xui.arr.insertAny(items,[{
id:xui.rand(),
caption:"new item with image",
image:"{/}img/demo.png"
},{
id:xui.rand(),
caption:"new item2 with fonticon",
"imageClass":"xui-icon-number5"
}],2);
comb.setItems(items);
},
_xui_ui_htmlbutton2_onclick:function (profile, e, value){
var ns = this, comb = ns.xui_ui_comboinput5;
// clear cache
comb.clearPopCache();
var items = comb.getItems();
xui.arr.removeFrom(items);
comb.setItems(items);
},
_xui_ui_htmlbutton3_onclick:function (profile, e, value){
var ns = this, comb = ns.xui_ui_comboinput5;
// clear cache
comb.clearPopCache();
comb.setItems([]);
}
}
});
   
support
 
Posts: 350
Joined: Sat Apr 27, 2013 9:22 am


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests

cron