It is currently Fri Oct 20, 2017 2:10 pm

News News of CrossUI Code Snaps

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

Find code here before you post.

Allow containers to take the height of content

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.Div")
.setHost(host,"xui_ui_div13")
.setLeft("13.333333333333334em")
.setTop("0.8333333333333334em")
.setHeight("auto")
.setCustomStyle({
"KEY":{
"border-top":"solid 1px #000000",
"border-right":"solid 1px #000000",
"border-bottom":"solid 1px #000000",
"border-left":"solid 1px #000000"
}
})
);

append(
xui.create("xui.UI.Group")
.setHost(host,"xui_ui_group2")
.setLeft("25em")
.setTop("0.8333333333333334em")
.setWidth("15em")
.setHeight("auto")
.setCaption("Group")
.setToggleBtn(false)
);

append(
xui.create("xui.UI.Panel")
.setHost(host,"xui_ui_panel3")
.setDock("none")
.setLeft("41.666666666666664em")
.setTop("0.8333333333333334em")
.setWidth("13.333333333333334em")
.setHeight("auto")
.setCaption("Panel")
);

append(
xui.create("xui.UI.Block")
.setHost(host,"xui_ui_block2")
.setLeft("1.6666666666666667em")
.setTop("0.8333333333333334em")
.setHeight("auto")
);

append(
xui.create("xui.UI.Button")
.setHost(host,"xui_ui_button10")
.setLeft("27.5em")
.setTop("24.166666666666668em")
.setCaption("Add line")
.onClick("_xui_ui_button10_onclick") ...
Read more : Allow containers to take the height of content | Views : 142 | Replies : 0


How to do adaptive layout according to the size of device

There are two ways to implement such adaptive layout.

1. Use 'position: relative'
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.Dialog")
.setHost(host,"xui_ui_dialog3")
.setLeft("14.166666666666666em")
.setTop("4.166666666666667em")
.setWidth("29.166666666666668em")
.setHeight("27.5em")
.setCaption("Resize the dialog ....")
.setMinBtn(false)
.setMaxBtn(false)
);

host.xui_ui_dialog3.append(
xui.create("xui.UI.Block")
.setHost(host,"xui_ui_block2")
.setWidth("8em")
.setHeight("8em")
.setPosition("relative")
.setHtml("<div style=\"text-align: center;\">Block 1</div>")
);

host.xui_ui_dialog3.append(
xui.create("xui.UI.Block")
.setHost(host,"xui_ui_block3")
.setWidth("8em")
.setHeight("8em")
.setPosition("relative")
.setHtml("<div style=\"text-align: center;\">Block 2</div>")
);

host.xui_ui_dialog3.append(
xui.create("xui.UI.Block")
.setHost(host,"xui_ui_block4")
.setWidth("8em")
.setHeight("8em")
.setPosition("relative")
.setHtml("<div style=\"text-align: center;\">Block ...
Read more : How to do adaptive layout according to the size of device | Views : 98 | Replies : 0


Costom Cell's Editor Control

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.Dialog")
.setHost(host,"xui_ui_dialog1")
.setLeft("2.5em")
.setTop("1.6666666666666667em")
.setWidth("35.833333333333336em")
.setHeight("20em")
.setCaption("Customize Cell's Editor")
.setMinBtn(false)
.setMaxBtn(false)
);

host.xui_ui_dialog1.append(
xui.create("xui.UI.Block")
.setHost(host,"xui_ui_block2")
.setDock("fill")
.setLeft("2.5em")
.setTop("2.5em")
.setBorderType("inset")
.setBackground("#FFFFFF")
);

host.xui_ui_block2.append(
xui.create("xui.UI.TreeGrid")
.setHost(host,"xui_ui_treegrid2")
.setLeft("0em")
.setTop("0em")
.setRowNumbered(true)
.setEditable(true)
.setRowHandler(false)
.setHeader()
.setRows([{
"cells":
},
{
"cells":
}])
.beforeIniEditor("_xui_ui_treegrid2_beforeinieditor")
);

append(
xui.create("xui.UI.List")
.setHost(host,"xui_ui_listeditor")
.setDirtyMark(false)
.setShowDirtyMark(false)
.setItems([{
"id":"item1",
"caption":"item1"
},
{ ...
Read more : Costom Cell's Editor Control | Views : 193 | Replies : 0


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 : 3494 | 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 : 2751 | 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 : 3118 | 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 : 3829 | 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 : 2418 | 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 : 2519 | 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 : 3293 | Replies : 0


 

Login  •  Register


Statistics

Total posts 991 • Total topics 332 • Total members 35

cron