Location: PHPKode > scripts > Sigma visual ajax UI builder > sigma-visual-ajax-ui-builder/Samples/linb/appearance/way6.html
<!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>
Return current item: Sigma visual ajax UI builder