It is currently Wed Sep 20, 2017 11:05 am

News News of CrossUI Code Snaps

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

Find code here before you post.

Demo code for upload file

xui.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.SLabel)
.setHost(host,"slabel1")
.setLeft(30)
.setTop(44)
.setCaption("Select your file: ")
);

append(
(new xui.UI.SButton)
.setHost(host,"sbutton3")
.setLeft(320)
.setTop(40)
.setCaption("Upload it")
.onClick("_sbutton3_onclick")
);

append(
(new xui.UI.ComboInput)
.setHost(host,"upload")
.setReadonly(true)
.setLeft(130)
.setTop(40)
.setWidth(180)
.setType("file")
.setValue("Select a file ...")
);

return children;
// ]]Code created by CrossUI RAD Tools
},
_sbutton3_onclick:function (profile, e, src, value) {
var file=this.upload.getUploadObj();
if(file){
xui.request('request.php',{file:file},function(rsp){
xui.alert(rsp.data.message);
},function(errMsg){
xui.alert(errMsg)
}).start();
} ...
Read more : Demo code for upload file | Views : 2925 | Replies : 0


How to load list of ComboInput dynamically

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

append(
(new xui.UI.ComboInput)
.setHost(host,"comboinput2")
.setLeft(70)
.setTop(30)
.setType("listbox")
.beforeComboPop("_comboinput2_beforecombopop")
);

return children;
// ]]Code created by CrossUI RAD Tools
},

_comboinput2_beforecombopop:function (profile, pos, e, src) {
var prop=profile.properties;
if(prop.items.length==0){
// Set face
profile.boxing().setItems();
// // Try to get from cache first
// var picklist = xxx.getFromCache...
// if(picklist){
// profile.boxing().setItems(picklist);
// }else{
// xui.request(xxx,{xxx},function(rsp){
// if(rsp){
// var ...
Read more : How to load list of ComboInput dynamically | Views : 2633 | Replies : 0


How to trigger event manually?

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.SButton)
.setHost(host,"ctl_sbutton1")
.setLeft(220)
.setTop(240)
.setCaption("Trigger beforePageClose Event only")
.onClick("_ctl_sbutton1_onclick")
);

append(
(new xui.UI.Pane)
.setHost(host,"ctl_pane6")
.setLeft(220)
.setTop(30)
.setWidth(370)
.setHeight(190)
);

host.ctl_pane6.append(
(new xui.UI.Tabs)
.setHost(host,"ctl_tabs2")
.setItems()
.setValue("a")
.beforePageClose("_ctl_tabs2_beforepageclose")
);

append(
(new xui.UI.SButton)
.setHost(host,"ctl_sbutton8")
.setLeft(470)
.setTop(240)
.setCaption("Trigger Dom Event")
.onClick("_ctl_sbutton8_onclick")
);

return children;
// ...
Read more : How to trigger event manually? | Views : 2539 | Replies : 0


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 : 2330 | 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 : 2685 | 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 : 3631 | 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 : 2572 | 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 : 2477 | 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 : 2740 | 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 : 2368 | Replies : 0


 

Login  •  Register


Statistics

Total posts 986 • Total topics 327 • Total members 35

cron