Try the code bellow:
// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
xui.Class('App', 'xui.Module',{
Instance:{
// Dependency classes
Dependencies:[],
// Required modules
Required:[],
// To initialize properties
properties : {
saved_sort:{
column : "col1",
order : true
}
},
// To initialize instance(e.g. properties)
initialize : function(){
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
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.Block")
.setHost(host,"xui_ui_block2")
.setLeft("9.142857142857142em")
.setTop("2.2857142857142856em")
.setWidth("32.838095238095235em")
.setHeight("11.504761904761905em")
);
host.xui_ui_block2.append(
xui.create("xui.UI.TreeGrid")
.setHost(host,"grid")
.setLeft("0em")
.setTop("0em")
.setAltRowsBg(true)
.setRowNumbered(true)
.setHeader([
{
"id" : "col1",
"width" : "8em",
"type" : "input",
"caption" : "col1"
},
{
"id" : "col2",
"width" : "8em",
"type" : "input",
"caption" : "col2"
},
{
"id" : "col3",
"width" : "8em",
"type" : "input",
"caption" : "col3"
},
{
"id" : "col4",
"width" : "8em",
"type" : "input",
"caption" : "col4"
}
])
.setRows([
{
"cells" : [
{
"value" : "A1"
},
{
"value" : "B1"
},
{
"value" : "C1"
},
{
"value" : "D1"
}
]
},
{
"cells" : [
{
"value" : "A2"
},
{
"value" : "B2"
},
{
"value" : "C2"
},
{
"value" : "D2"
}
]
},
{
"cells" : [
{
"value" : "A3"
},
{
"value" : "B3"
},
{
"value" : "C3"
},
{
"value" : "D3"
}
]
},
{
"cells" : [
{
"value" : "A4"
},
{
"value" : "B4"
},
{
"value" : "C4"
},
{
"value" : "D4"
}
]
},
{
"cells" : [
{
"value" : "A5"
},
{
"value" : "B5"
},
{
"value" : "C5"
},
{
"value" : "D5"
}
]
}
])
.afterColSorted("_treegrid_aftercolsorted")
);
append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"btn_save")
.setLeft("12.19047619047619em")
.setTop("16em")
.setCaption("Save Status")
.onClick("_btn_save_onclick")
);
append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"btn_restore")
.setLeft("30.476190476190474em")
.setTop("16em")
.setCaption("Restore Status")
.onClick("_btn_restore_onclick")
);
return children;
// ]]Code created by CrossUI RAD Studio
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
_treegrid_aftercolsorted:function(profile, col){
var ns = this, uictrl = profile.boxing();
//keep the last sort
ns.properties.last_sort = {
column: col.id,
order: col._order
};
},
_btn_save_onclick:function(profile, e, src){
var ns = this, grid_scroll_node=ns.grid.getSubNode("SCROLL22");
//save the last sort
ns.properties.saved_sort = xui.copy(ns.properties.last_sort);
//save the scroll position
ns.properties.saved_pos = {
left: grid_scroll_node.scrollLeft(),
top: grid_scroll_node.scrollTop()
};
xui.message("sort and scroll info were saved!");
},
_btn_restore_onclick:function(profile, e, src){
var ns = this, saved_sort=ns.properties.saved_sort || {}, saved_pos=ns.properties.saved_pos || {};
if(saved_sort.column){
ns.grid.sortColumn(saved_sort.column, !saved_sort.order);
}
ns.grid.getSubNode("SCROLL22").scrollLeft(saved_pos.left);
ns.grid.getSubNode("SCROLL22").scrollTop(saved_pos.top);
xui.message("sort and scroll info were restored!");
}
/*,
// To determine how properties affects this module
propSetAction : function(prop){
},
// To set all node's style in this modlue
customStyle:{}
},
//To customize the default properties and event handlers
Static:{
$DataModel:{
},
$EventHandlers:{
}
*/
}
});