<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="javascript framework, RIA, SPA, client SOA, linb, jsLinb, RAD, IDE, Web IDE, widgets, javascript OOP, opensource, open-source, Ajax, cross-browser, prototype, web2.0, platform-independent, language-independent" />
<meta name="description" content="Web application created by Visual JS, powered by LINB framework" />
<meta name="copyright" content="hide@address.com" />
<meta http-equiv="imagetoolbar" content="no" />
<style>
.cls1{
border:dashed 2px #0000ff;
}
.cls2{
font-size:14px;
border:solid 1px #444;
margin: 4px;
}
</style>
<title>jsLinb appearance sample -- use itemClass and itemStyle</title>
</head>
<body style="height:100%;overflow:hidden;" scroll="no">
<script type="text/javascript" src="../../../runtime/jsLinb/js/linb-all.js"></script>
<script type="text/javascript">
linb.main(function(){
var tgdata= {
header: [
{
"id" : "col1",
"caption" : "col1",
"type" : "input",
"width" : 50
},
{
"id" : "col2",
"caption" : "col2",
"type" : "number",
"format":"^-?\\d\\d*$",
"headerStyle":"background-color:#eee;",
"cellStyle":"background-color:#eee;",
"renderer":function(i,oi){return '['+ i.caption+']'},
"cellRenderer":function(i,oi){return 'RMB'+ i.value},
"width" : 80
},
{
"id" : "col3",
"caption" : "col3",
"type" : "checkbox",
"width" : 40
},
{
"id" : "col4",
"caption" : "col4",
"type" : "colorpicker",
"width" : 60
}
],
rows: [
{
"id" : "row1",
"cells" : ["cell11",1,true,'#FFFFFF']
},
{
"id" : "row2",
"rowStyle":"font-weight:bold;background-color:#eee;",
"cells" : ["cell21",2,true,'#eeeAAA']
},
{
"id" : "row3",
"cells" : ["cell31",3,false,'#00FFFF']
},
{
"id" : "row4",
"cells" : ["cell41",4,false,'#FF00FF'],
"sub" : [
{
"id" : "row5",
"cells" : ["in51",5,false,'#0000FF']
},
{
"id" : "row6",
"cells" : ["in61",6,false,'#FF0000']
},
{
"id" : "row7",
"cells" : ["in71",7,false,'#F0000F']
},
{
"id" : "row8",
"cells" : ["in81",8,false,'#555555']
}
]
},
{
"id" : "row9",
"cells" : ["cell91",9,false,'#FFFFFF'],
"sub" : [
{
"id" : "row10",
"cells" : ["in101",10,false,'#FFFFFF']
},
{
"id" : "row11",
"cells" : ["in111",11,false,'#FFFF00']
},
{
"id" : "row12",
"cells" : ["in121",12,false,'#FF00FF']
},
{
"id" : "row13",
"cells" : ["in131",13,false,'#00FFFF']
}
]
}
]
};
Class('App', 'linb.Com',{
Instance:{
//Com events
events:{},
iniComponents:function(){
// [[code created by jsLinb UI Builder
var host=this, children=[], append=function(child){children.push(child.get(0))};
append((new linb.UI.List)
.host(host,"list3")
.setItems([{"id":"a", "caption":"itema", "itemClass":"cls1"}, {"id":"b", "caption":"itemb", "itemClass":"cls2"}])
.setLeft(40)
.setTop(40)
);
append((new linb.UI.List)
.host(host,"list4")
.setItems([{"id":"a", "caption":"16px", "itemStyle":"font-size:14px;"}, {"id":"b", "caption":"18px", "itemStyle":"font-size:18px;"}, {"id":"d", "caption":"20px", "itemStyle":"font-size:20px;"}, {"id":"e", "caption":"22px", "itemStyle":"font-size:22px;"}])
.setLeft(200)
.setTop(40)
);
append((new linb.UI.Pane)
.host(host,"pane3")
.setLeft(350)
.setTop(40)
.setWidth(280)
.setHeight(150)
);
host.pane3.append((new linb.UI.TreeGrid)
.host(host,"tg")
.setDockMargin({"left":0, "top":0, "right":0, "bottom":0})
.setHeader(tgdata.header)
.setRows(tgdata.rows)
);
return children;
// ]]code created by jsLinb UI Builder
},
base:[],
required:["linb.UI.List", "linb.UI.Pane", "linb.UI.TreeGrid"]
}
});
(new App).show();
});
</script>
</body>
</html>