It is currently Thu Mar 30, 2017 12:41 pm

News News of CrossUI Code Snaps

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

Find code here before you post.

Save TreeGrid data to json

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

append(
(new xui.UI.Pane())
.setHost(host,"ctl_pane6")
.setLeft(150)
.setTop(50)
.setWidth(360)
.setHeight(230)
);

host.ctl_pane6.append(
(new xui.UI.TreeGrid())
.setHost(host,"ctl_treegrid2")
.setRowNumbered(true)
.setHeader([{
"id" : "col1",
"width" : 80,
"type" : "input",
"caption" : "col1"
},{
"id" : "col2",
"width" : 80,
"type" : "input",
"caption" : "col2"
},{
"id" : "col3",
"width" : 80,
"type" : "input",
"caption" : "col3"
},{
"id" : "col4",
"width" ...
Read more : Save TreeGrid data to json | Views : 3134 | Replies : 0


How to set a group columns in the header?

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

append(
(new xui.UI.Pane())
.setHost(host,"ctl_pane6")
.setLeft(10)
.setTop(10)
.setWidth(490)
.setHeight(190)
);

host.ctl_pane6.append(
(new xui.UI.TreeGrid())
.setHost(host,"ctl_treegrid2")
.setRowNumbered(true)
.setHeaderHeight(60)
.setHeader([{
"id" : "col1",
"width" : 80,
"type" : "input",
"caption" : "col1"
},{
"id" : "col2",
"width" : 80,
"type" : "input",
"caption" : "col2"
},{
"id" : "col3",
"width" : 80,
"type" : "input",
"caption" : "col3"
},{
"id" : "col4", ...
Read more : How to set a group columns in the header? | Views : 2546 | Replies : 0


How to incorporate 3rd party scripts such as a leafletjs map

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.Div())
.setHost(host,"ctl_div15")
.setDomId("map")
.setLeft(80)
.setTop(40)
.setWidth(600)
.setHeight(280)
);

return children;
// ]]Code created by CrossUI RAD Tools
},
events:{"onRender":"_com_onrender"},
_com_onrender:function (com, threadid){
var ns=this;

// You can include them in html file
xui.CSS.includeLink("http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css");
xui.include("L","http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js",function(){
ns._buildMap();
});
},
_buildMap:function(){
var map = L.map('map').setView(, 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker().addTo(map)
.bindPopup('A pretty CSS3 ...
Read more : How to incorporate 3rd party scripts such as a leafletjs map | Views : 2855 | Replies : 0


Customize cell style dynamically

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.Pane)
.setHost(host,"ctl_pane6")
.setLeft(40)
.setTop(20)
.setWidth(490)
.setHeight(320)
);

host.ctl_pane6.append(
(new xui.UI.TreeGrid)
.setHost(host,"ctl_treegrid2")
.setRowNumbered(true)
.setEditable(true)
.setRowResizer(true)
.setHeader([{"id":"col1", "width":80, "type":"input", "caption":"Method 1", "cellRenderer":function (cell){
if(cell.value.indexOf('2') != -1){
return "<"+"div style='background-color:#0000ff;height:100%'>" + cell.value + "<"+"/div>";
}else{
return cell.value;
}
}}, {"id":"col2", "width":80, "type":"input", "caption":"Method 2", "cellRenderer":function (cell){
var prf=this;
if(cell.value.indexOf('2') != -1){
_.asyRun(function(){
if(prf && prf.boxing())
prf.boxing().updateCell(cell,{cellStyle:cell.value.indexOf('3') != -1?'background-color:#00ff00':'background-color:transparent'},true,false);
}); ...
Read more : Customize cell style dynamically | Views : 3601 | Replies : 0


Adjust value to date string for date-type ComboInput

Original post : get-the-value-of-a-comboinput-type-date-t97.html

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.DataBinder)
.setHost(host,"databinder_1")
.setName("databinder_1")
.afterUpdateDataFromUI("_databinder_1_afterupdatedatafromui")
);

append(
(new xui.UI.ComboInput)
.setHost(host,"ctl_comboinput25")
.setDataBinder("databinder_1")
.setDataField("date")
.setLeft(90)
.setTop(30)
.setType("date")
.setValue("1370016000000")
);

append(
(new xui.UI.SButton)
.setHost(host,"ctl_sbutton19")
.setLeft(90)
.setTop(90)
.setWidth(120)
.setCaption("Get Date Value")
.onClick("_ctl_sbutton19_onclick")
);

return children;
// ]]Code created by CrossUI RAD Tools
},
_ctl_sbutton19_onclick : function (profile, e, src, value){
xui.alert(_.serialize(this.databinder_1.updateDataFromUI().getData())); ...
Read more : Adjust value to date string for date-type ComboInput | Views : 2223 | Replies : 0


Required option for input widget

Original post : required-input-option-t96.html

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.ComboInput)
.setHost(host,"ctl_comboinput7")
.setLeft(30)
.setTop(50)
.setWidth(240)
.setLabelSize(120)
.setLabelCaption("Required")
.setType("none")
.setTips("Required field")
.setTipsErr("Must be specified")
.setTipsOK("OK")
.setValueFormat("")
.setCustomStyle({"LABEL":{"font-weight":"bold", "color":"#FF0000", "$gradients":""}})
);

append(
(new xui.UI.ComboInput)
.setHost(host,"ctl_comboinput6")
.setLeft(30)
.setTop(20)
.setWidth(240)
.setLabelSize(120)
.setLabelCaption("Optional")
.setType("none")
);

append(
(new xui.UI.SButton)
.setHost(host,"ctl_sbutton6")
.setLeft(150)
.setTop(90)
.setWidth(120)
.setCaption("Submit")
.onClick("_ctl_sbutton6_onclick")
);

return children;
// ]]Code created by ...
Read more : Required option for input widget | Views : 2289 | Replies : 0


TreeGrid : Colums width automatically fill space

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(10)
.setTop(10)
.setWidth(380)
.setHeight(230)
.setCaption("TreeGrid : Colums width automatically fill space")
);

host.ctl_dialog2.append(
(new xui.UI.TreeGrid)
.setHost(host,"ctl_treegrid2")
.setRowNumbered(true)
.setRowHandler(false)
.setColHidable(true)
.setColMovable(true)
.setHeader([{"id":"col1", "width":30, "type":"input", "caption":"30%", "relWidth":true, "maxWidth":300, "minWidth":100}, {"id":"col2", "width":70, "type":"input", "caption":"70%", "relWidth":true, "maxWidth":300, "minWidth":100}, {"id":"col3", "width":80, "type":"input", "caption":"fixed:80"}, {"id":"col4", "width":60, "type":"input", "caption":"fixed:60"}])
.setRows([,,["row3 col1", "row3 col2", ...
Read more : TreeGrid : Colums width automatically fill space | Views : 3090 | Replies : 0


Demo code for upload file

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 : 2656 | 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 : 2467 | 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 : 2318 | Replies : 0


 

Login  •  Register


Statistics

Total posts 955 • Total topics 320 • Total members 35

cron