Extjs 학습-간단 한 Grid 사용

Grid.js 파일

Ext.onReady(function(){

    var sm = new Ext.grid.CheckboxSelectionModel();

    //  ColumnModel     ， Grid   。                   。 
    //dataIndex: grid  Ext.data.Store  Ext.data.Record       ...
    //renderer(  )            ，      HTML     。   setRenderer.      ...
    
    var cm=new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(), //      
        sm,
        {header:'  ',dataIndex:'id',width:50,sortable:true},      
        {header:'  ',dataIndex:'name'},
        {header:'  ',dataIndex:'color'},
        {header:'  ',dataIndex:'sex',renderer:renderSex}, //         
        {header:'  ',dataIndex:'descn',renderer:renderDesc} //    
    ]);

 
    //  
    var data=[
        ['1','name1','#FBF8BF',' ','descn1'],
        ['2','name2','#99CC99',' ','descn2'],
        ['3','name3','#F5C0C0',' ','descn3'],
        ['4','name4','#FFFFFF',' ','descn4'],
        ['5','name5','#99CC99',' ','descn5']
    ];
    //Store    Record         ，    GridPanel 、ComboBox   DataView           。 

    //Store         DataProxy         ，       loadData          。 

    //Store     Proxy           。

    //Store         DataReader            Record   。  Record    ，          。 

    var store=new Ext.data.Store({
        //proxy:new Ext.data.MemoryProxy(data),
        proxy:new Ext.data.PagingMemoryProxy(data),//               
        reader:new Ext.data.ArrayReader({},[
            {name:'id'},
            {name:'name'},
            {name:'color'},
            {name:'sex'},
            {name:'descn'}
        ])
    });

    

    var grid=new Ext.grid.GridPanel({
        enableColumnMove:true,      //True     Column     ,     
        enableColumnResize:true,      //   false               (     true). 
        stripeRows : true, //True           ，   false. 
        autoHeight: true,
        loadMask:true,      //             ，   false
        renderTo:'grid',   //          id、  DOM            ，           
        store:store,      //Grid  Ext.data.Store         (  ). 
        cm:cm,        //    grid Ext.grid.ColumnModel  ，    model (  ). 
        //sm:sm,          //  AbstractSelectionModel        grid     (selection model)
        sm:new Ext.grid.RowSelectionModel({singleSelect:true}), //         
        //bbar : Object/Array panel      。     Ext.Toolbar   
        bbar:new Ext.PagingToolbar({    //       
            pageSize:3,  //        
            store:store,
            displayInfo:true,   //        
            displayMsg: '    {0}    {1}    ，   {2}  ',
            emptyMsg: "    " //          
        }),
        
        viewConfig:{    //    gird ui        .Ext.grid.GridView            ...

            forceFit:true, //Ture                grid   ,           .
            
            enableRowBody:true, //True              TR  ,   TR                  
            getRowClass: GetRowClass   //                    CSS .
        }
        
    });
    
    
    
    //getSelectionModel() : SelectionModel   grid SelectionModel。
    //getSelections() : Array           
     grid.on('click', function() {
        var selections = grid.getSelectionModel().getSelections();
        for (var i = 0; i < selections.length; i++) {
            var record = selections[i];
            Ext.Msg.alert('  ', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
        }
    });
    
    //     Reader Proxy   Record  。 
    //          ，  store.load    Grid    
    store.load({params:{start:0,limit:3}});
    
  

});

function renderSex(value){
    if(value==' '){
        return "<span style='color:red;font-weight:bold;'>  </span><img src='user_male.png' />";
    }else{
         return "<span style='color:green;font-weight:bold;'>  </span><img src='user_female.png' />";
    }
}


function renderDesc(value,cellmeta,record,rowIndex,columnIndex,store){
    var str="<input type='button' value='      ' onclick='alert(\""+
            "        ："+value+"\
"+"         ：{cellId:"+
            cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}\
"+
            "         record ："+record+",         \
"+
            "   "+rowIndex+" \
"+
            "   "+columnIndex+" \
"+
            "       ext.data.Store   ："+store+",    ！"+
            "\")'>";
    return str;
}

//         
function GetRowClass(record,rowIndex,p,ds){
    var cls = 'white-row';
    switch (record.data.color) {
        case '#FBF8BF' :
            cls = 'yellow-row'
            break;
        case '#99CC99' :
            cls = 'green-row'
            break;
        case '#F5C0C0' :
            cls = 'red-row'
            break;
    }     
    return cls;
}

html 파일

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>   Grid  </title>
    <link href="../extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="Grid.css" rel="stylesheet" type="text/css" />
    <script src="../extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../extjs/ext-all.js" type="text/javascript"></script>
    <script src="PagingMemoryProxy.js" type="text/javascript"></script>
    <script src="Grid.js" type="text/javascript"></script>
</head>
<body>

    <script src="../ext-3.0.0/examples/shared/examples.js" type="text/javascript"></script>
<div id="grid">
    
</div>
</body>
</html>

Grid.css 파일

.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }