It is currently Tue Jun 27, 2017 5:12 am

News News of CrossUI Code Snaps

Site map of CrossUI Code Snaps » Forum : CrossUI Code Snaps

Find code here before you post.

How to expand/fold all nodes in TreeView?

The followsing code needs xui revision >= 23:

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

append(
(new xui.UI.Block)
.setHost(host,"ctl_pane6")
.setLeft(30)
.setTop(40)
.setWidth(270)
.setHeight(220)
.setBorderType("inset")
);

host.ctl_pane6.append(
(new xui.UI.TreeView)
.setHost(host,"ctl_treebar3")
.setItems([{"id":"node1", "sub":["node11", {"id":"node12", "image":"img/demo.gif", "sub":}, "node13", "node14"], "caption":"node1"}, {"id":"node2", "sub":, "caption":"node2"}])
);

append(
(new xui.UI.SButton)
.setHost(host,"ctl_sbutton5")
.setLeft(50)
.setTop(10)
.setWidth(100)
.setCaption("Expand All")
.onClick("_ctl_sbutton5_onclick")
);

append(
(new xui.UI.SButton)
.setHost(host,"ctl_sbutton15")
.setLeft(170)
.setTop(10)
.setWidth(100)
.setCaption("Fold ...
Read more : How to expand/fold all nodes in TreeView? | Views : 2240 | Replies : 0


To adjust row height depending on content in TreeGrid

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

append(
(new xui.UI.Block)
.setHost(host,"ctl_block2")
.setLeft(70)
.setTop(40)
.setWidth(500)
.setHeight(330)
.setBorderType("inset")
);

host.ctl_block2.append(
(new xui.UI.TreeGrid)
.setHost(host,"ctl_treegrid2")
.setRowNumbered(true)
.setHeader()
.setRows([{"cells":, "id":"e"}, {"cells":[{"value":"2rd row<br/> first col", "id":"c_e"}, {"value":"2rd ...
Read more : To adjust row height depending on content in TreeGrid | Views : 2579 | Replies : 0


How to integrate jQuery and HighCharts?

Integrated-HighCharts.PNG

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

append(
(new xui.UI.Dialog)
.setHost(host,"ctl_dialog1")
.setLeft(49)
.setTop(10)
.setWidth(430)
.setHeight(460)
.setCaption("How to integrate jQuery and HighCharts?")
);

host.ctl_dialog1.append(
(new xui.UI.Div)
.setHost(host,"ctl_div13")
.setDomId("a_container")
.setLeft(8)
.setTop(9)
.setWidth(400)
.setHeight(400)
);

return children;
// ]]code created by CrossUI RAD Tools
},
events : {"onReady":"_com_onready"},
_buildChart:function(){
// Use jQuery code :
// Build the chart
$('#a_container').highcharts({
chart: {
plotBackgroundColor: null, ...
Read more : How to integrate jQuery and HighCharts? | Views : 3487 | Replies : 0


How to integrate Raphael?

Integrated-Raphael.PNG

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

append(
(new xui.UI.Dialog)
.setHost(host,"ctl_dialog2")
.setLeft(100)
.setTop(20)
.setWidth(320)
.setHeight(340)
.setResizer(false)
.setCaption("How to integrate Raphael?")
.setMinBtn(false)
.setMaxBtn(false)
);

host.ctl_dialog2.append(
(new xui.UI.Pane)
.setHost(host,"ctl_pane7")
.setDomId("RaphaelCanvas")
.setDock("fill")
);

return children;
// ]]code created by CrossUI RAD Tools
},
drawRaphael:function(domId){
var paper = Raphael("RaphaelCanvas", 300, 300);
paper.clear();
paper.rect(0, 0, 300, 300, 10).attr({fill: "#fff", stroke: "none"});
paper.circle(150, 150, 60)
.animate({fill: ...
Read more : How to integrate Raphael? | Views : 2444 | Replies : 0


ToolTips

Class('App.snip_tooltips', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host = this,
children = ,
append = function(child){
children.push(child.get(0))
};

append((new xui.UI.Group)
.setHost(host,"group1")
.setLeft(40)
.setTop(30)
.setWidth(540)
.setCaption("normal")
);

host.group1.append((new xui.UI.Link)
.setHost(host,"link1")
.setTips("tips on link")
.setLeft(40)
.setTop(10)
.setCaption("link1")
);

host.group1.append((new xui.UI.Button)
.setHost(host,"button18")
.setTips("tips on button")
.setLeft(110)
.setTop(10)
);

host.group1.append((new xui.UI.List)
.setHost(host,"list3")
.setItems()
.setTips("tips on list")
.setLeft(280)
.setTop(0)
.setHeight(60)
);

append((new xui.UI.Group)
.setHost(host,"group2")
.setLeft(40)
.setTop(150)
.setWidth(540)
.setCaption("set tips in ...
Read more : ToolTips | Views : 2357 | Replies : 0


serialize / unserialize

Class('App.snip_serialize', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};
append((new xui.UI.Group)
.setHost(host,"Group1")
.setLeft(16)
.setTop(16)
.setWidth(776)
.setHeight(184)
.setCaption("(un)serialize 1")
);
host.Group1.append((new xui.UI.Button)
.setHost(host,"Button11")
.setLeft(200)
.setTop(60)
.setWidth(48)
.setCaption(">>")
.onClick("_button1_onclick")
);
host.Group1.append((new xui.UI.Block)
.setHost(host,"Block12")
.setLeft(616)
.setTop(32)
.setWidth(152)
.setHeight(96)
.setBorder(true)
);
host.Group1.append((new xui.UI.Block)
.setHost(host,"Block11")
.setLeft(8)
.setTop(32)
.setWidth(152)
.setHeight(96)
.setBorder(true)
);
host.Block11.append((new xui.UI.Button)
.setHost(host,"Button1")
.setLeft(16)
.setTop(32)
.setCaption("Button")
);
host.Group1.append((new xui.UI.Input)
.setHost(host,"Input1")
.setLeft(290)
.setTop(8)
.setWidth(208)
.setHeight(144)
.setMultiLines(true)
);
host.Group1.append((new xui.UI.Button)
.setHost(host,"Button12")
.setLeft(528)
.setTop(64)
.setWidth(48)
.setCaption(">>") ...
Read more : serialize / unserialize | Views : 2615 | Replies : 0


ToolTips

Class('App.snip_tooltips', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host = this,
children = ,
append = function(child){
children.push(child.get(0))
};

append((new xui.UI.Group)
.setHost(host,"group1")
.setLeft(40)
.setTop(30)
.setWidth(540)
.setCaption("normal")
);

host.group1.append((new xui.UI.Link)
.setHost(host,"link1")
.setTips("tips on link")
.setLeft(40)
.setTop(10)
.setCaption("link1")
);

host.group1.append((new xui.UI.Button)
.setHost(host,"button18")
.setTips("tips on button")
.setLeft(110)
.setTop(10)
);

host.group1.append((new xui.UI.List)
.setHost(host,"list3")
.setItems()
.setTips("tips on list")
.setLeft(280)
.setTop(0)
.setHeight(60)
);

append((new xui.UI.Group)
.setHost(host,"group2")
.setLeft(40)
.setTop(150)
.setWidth(540)
.setCaption("set tips in ...
Read more : ToolTips | Views : 2242 | Replies : 0


Mask Input 2

   
Class('App.tech_form_f2', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.Input)
.setHost(host,"input2")
.setLeft(210)
.setTop(70)
.setWidth(260)
.setTips("Input please")
.setTipsErr(": (")
.setTipsOK(": )")
.setTipsBinder("divB1")
.setMask("(111) aaa-11%$1")
);

append((new xui.UI.Div)
.setHost(host,"div13")
.setLeft(60)
.setTop(70)
.setWidth(130)
.setHeight(20)
.setHtml("(111) aaa-11%$1")
);

append((new xui.UI.Div)
.setHost(host,"divB1")
.setLeft(490)
.setTop(70)
.setWidth(230)
.setHeight(20)
);

return children;
// ]]code created by CrossUI RAD Tools
}
}
});
   
Read more : Mask Input 2 | Views : 2210 | Replies : 0


Mask Input

Class('App.tech_form_f1', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.Group)
.setHost(host,"group1")
.setLeft(60)
.setTop(40)
.setWidth(500)
.setCaption("mask input")
);

host.group1.append((new xui.UI.Div)
.setHost(host,"div14")
.setLeft(233)
.setTop(19)
.setWidth(90)
.setHeight(20)
.setHtml("(111) 111-1111")
);

host.group1.append((new xui.UI.Div)
.setHost(host,"div13")
.setLeft(20)
.setTop(19)
.setWidth(80)
.setHeight(20)
.setHtml("11/11/1111")
);

host.group1.append((new xui.UI.Div)
.setHost(host,"div15")
.setLeft(20)
.setTop(50)
.setWidth(80)
.setHeight(20)
.setHtml("~1.11")
);

host.group1.append((new xui.UI.Div)
.setHost(host,"div16")
.setLeft(250)
.setTop(50)
.setWidth(80)
.setHeight(20)
.setHtml("(111) a-a *$*")
);

host.group1.append((new xui.UI.Input)
.setHost(host,"iMask")
.setLeft(100)
.setTop(19)
.setMask("11/11/1111")
.setTabindex("17")
);

host.group1.append((new xui.UI.Input)
.setHost(host,"input18")
.setLeft(330) ...
Read more : Mask Input | Views : 2190 | Replies : 0


Form validator dynamically

Class('App.tech_form_v3', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[code created by CrossUI RAD Tools
var host=this, children=, append=function(child){children.push(child.get(0))};

append((new xui.UI.Div)
.setHost(host,"div13")
.setLeft(60)
.setTop(70)
.setWidth(130)
.setHeight(20)
.setHtml("Using ValueFormat")
);

append((new xui.UI.Div)
.setHost(host,"div12")
.setLeft(170)
.setTop(30)
.setWidth(420)
.setHeight(20)
.setHtml("Format Validator (example : only number) -- check dynamically")
);

append((new xui.UI.Input)
.setHost(host,"input2")
.setLeft(210)
.setTop(70)
.setWidth(260)
.setValueFormat("^-?(\\d\\d*\\.\\d*$)|(^-?\\d\\d*$)|(^-?\\.\\d\\d*$)")
.setTips("Input number please")
.setTipsErr(": (")
.setTipsOK(": )")
.setTipsBinder("divB1")
.setDynCheck(true)
);

append((new xui.UI.Div)
.setHost(host,"divB1")
.setLeft(490)
.setTop(70)
.setWidth(230)
.setHeight(20)
.setHtml("Using ValueFormat")
);

return children;
// ]]code created by ...
Read more : Form validator dynamically | Views : 2186 | Replies : 0


 

Login  •  Register


Statistics

Total posts 960 • Total topics 321 • Total members 35

cron