extjs 2.3 Grid使用

View Code

Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.lib.Ajax.defaultPostHeader = "application/x-www-form-urlencoded; charset=utf-8";
   // data.jsp  ={
//                    "userList":[{"age":1,"name":"弄疯","password":"弄艾丝凡"},
//                        {"age":2,"name":"弄2","password":"弄艾丝凡gPassword2"}
//                   ]} 

    var store = new Ext.data.Store({       
        proxy: new Ext.data.HttpProxy({       
            url:'data.jsp',       
            method: 'POST'      
        }),       
        reader: new Ext.data.JsonReader({            
            root: 'userList',
            },[{name: 'age', mapping: 'age'},    
             {name: 'name', mapping: 'name'},    
                 {name: 'password', mapping: 'password'}]            
        )       
    });   
    store.baseParams={
            euser:encodeURIComponent("utf-8"),
            batName:encodeURIComponent("utf-8")  
            };        //编码

    store.load();    //load

    var column = new Ext.grid.ColumnModel([       
                                           {header: '姓名', dataIndex: 'name'},    
                                           {header: '密码', dataIndex: 'password'},    
                                              {header: '年龄', dataIndex: 'age'}          
                                          ]);       
                                          column.defaultSortable = true;  //排序 
                                          
                                          var grid = new Ext.grid.GridPanel({       
                                              el: 'grid-example',       
                                              width:600,            
                                              height:300,         
                                              title:'标题',               //标题
                                              store: store,                //Grid应使用Ext.data.Store作为其数据源（必须的）。     
                                              cm: column,               //colModel的简写方式
                                              trackMouseOver: false,      //鼠标移动时高亮
                                              sm: new Ext.grid.RowSelectionModel() //selModel的简写方式     
                                          })
                                             grid.render();                //执行容器的渲染，可以将渲染执行在送入的HTML元素上面。

});

不兼容IE6,拒绝IE6!!!!!坑爷...

 

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

<script type="text/javascript" src="js/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="css/grid-examples.css" />

<link rel="stylesheet" type="text/css" href="css/examples.css" />

转载于:https://www.cnblogs.com/-gap/archive/2012/05/25/2517930.html