EXTJS之GRID 二

6.Json数据

至于这种数据的类型请大家自己看Ajax的书籍：

Js代码

1.  //JsonData   
2. var data = {    
3.     'coders': [   
4.         { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },   
5.         { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },   
6.         { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },   
7.         { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }   
8.     ],   
9.     'musicians': [   
10.         { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },   
11.         { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }   
12.     ]   
13. }   
14. //ds使用的MemoryProxy对象和JsonReader对象   
15. var ds = new Ext.data.Store({   
16.         proxy: new Ext.data.MemoryProxy(data),   
17.         reader: new Ext.data.JsonReader({root: 'coders'}, [   
18.             {name: 'id'},   
19.             {name: 'sex'},   
20.             {name: 'name'},   
21.             {name: 'descn'}   
22.         ])   
23.     });   
24. ds.load();   
25. var grid = new Ext.grid.GridPanel({   
26.     el: 'grid3',   
27.     ds: ds,   
28.     cm: cm,   
29.     sm: sm,   
30.     title: 'HelloWorld',   
31.     autoHeight: true//一定要写，否则显示的数据会少一行   
32. });   
33. grid.render();  

 //JsonData
var data = { 
    'coders': [
        { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
ds.load();
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    autoHeight: true//一定要写，否则显示的数据会少一行
});
grid.render();

 

7.使用XML数据：

注意，读取XML数据必须在服务器上进行。

XML数据test.xml的内容：

Xml代码

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <dataset>  
3.      <results>2</results>  
4.      <item>  
5.            <id>1</id>  
6.            <sex>male</sex>  
7.            <name>Taylor</name>  
8.            <descn>Coder</descn>  
9.      </item>  
10. </dataset>var ds3 = new Ext.data.Store({   
11.     url: 'test.xml',   //XML数据   
12.     reader: new Ext.data.XmlReader({record: 'item'}, [  //使用XmlReader对象   
13.         {name: 'id'},   
14.         {name: 'sex'},   
15.         {name: 'name'},   
16.         {name: 'descn'}   
17.     ])   
18. });  

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
     <results>2</results>
     <item>
           <id>1</id>
           <sex>male</sex>
           <name>Taylor</name>
           <descn>Coder</descn>
     </item>
</dataset>var ds3 = new Ext.data.Store({
    url: 'test.xml',   //XML数据
    reader: new Ext.data.XmlReader({record: 'item'}, [  //使用XmlReader对象
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});

 

8.从服务器获取数据和数据翻页控件

从一个服务器文件，如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据，也可以被Ext读取，并被Grid显示：

服务器文件data.asp:

Js代码

1. <%   
2.     start = cint(request("start"))   
3.     limit = cint(request("limit"))   
4.     dim json   
5.     json=cstr("{totalProperty:100,root:[")      
6.     for i = start to limit + start-1   
7.         json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")   
8.         if i <> limit + start - 1 then   
9.             json =json + ","  
10.         end if  
11.     next   
12.     json = json +"]}"  
13.     response.write(json)   
14. %>  

<%
    start = cint(request("start"))
    limit = cint(request("limit"))
    dim json
    json=cstr("{totalProperty:100,root:[")   
    for i = start to limit + start-1
        json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
        if i <> limit + start - 1 then
            json =json + ","
        end if
    next
    json = json +"]}"
    response.write(json)
%>

 我们可以看到，这个页面会根据传入的start和limit的不同，返回不同的数据，其实质是个分页的代码。下面是start=0,limit=10的JSON数据：

Js代码

1. {totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}  

{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}

 

我们使用分页控件来控制Grid的数据：

Js代码

1. Ext.onReady(function(){   
2.     var sm = new Ext.grid.CheckboxSelectionModel();   
3.     var cm = new Ext.grid.ColumnModel([   
4.         new Ext.grid.RowNumberer(),   
5.         sm,   
6.         {header:'编号',dataIndex:'id'},   
7.         {header:'性别',dataIndex:'sex'},   
8.         {header:'名称',dataIndex:'name'},   
9.         {header:'描述',dataIndex:'descn'}   
10.     ]);   
11.     cm.defaultSortable = true;   
12.     var ds = new Ext.data.Store({   
13.         proxy: new Ext.data.HttpProxy({url:'data.asp'}),   
14.         reader: new Ext.data.JsonReader({   
15.             totalProperty: 'totalProperty',   
16.             root: 'root'  
17.         }, [   
18.             {name: 'id'},   
19.             {name: 'name'},   
20.             {name: 'descn'}   
21.         ])   
22.     });   
23.     ds.load({params:{start:0,limit:10}});   
24.     var grid = new Ext.grid.GridPanel({   
25.         el: 'grid3',   
26.         ds: ds,   
27.         cm: cm,   
28.         sm: sm,   
29.         title: 'ASP->JSON',   
30.         bbar: new Ext.PagingToolbar({   
31.             pageSize: 10,   
32.             store: ds,   
33.             displayInfo: true,   
34.             displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',   
35.             emptyMsg: "没有记录"  
36.         }),   
37.         tbar: new Ext.PagingToolbar({   
38.             pageSize: 10,   
39.             store: ds,   
40.             displayInfo: true,   
41.             displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',   
42.             emptyMsg: "没有记录"  
43.         })   
44.     });   
45.     grid.render();   
46. })  

Ext.onReady(function(){
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load({params:{start:0,limit:10}});
    var grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        sm: sm,
        title: 'ASP->JSON',
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    grid.render();
})

 

10.如何在Grid的上方添加按钮呢？

添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条：

Js代码

1. var grid = new Ext.grid.GridPanel({   
2.     el: 'grid3',   
3.     ds: ds,   
4.     cm: cm,   
5.     sm: sm,   
6.     title: 'HelloWorld',   
7.     tbar: new Ext.Toolbar({    
8.         items:[    
9.                 {    
10.                     id:'buttonA'    
11.                     ,text:"Button A"    
12.                     ,handler: function(){ alert("You clicked Button A"); }    
13.                 }    
14.                ,   
15.                 new Ext.Toolbar.SplitButton({})   
16.                 ,{    
17.                     id:'buttonB'    
18.                     ,text:"Button B"    
19.                     ,handler: function(){ alert("You clicked Button B"); }    
20.                 }    
21.                 ,   
22.                 '-'  
23.                 ,{   
24.                     id:'buttonc'    
25.                     ,text:"Button c"  
26.                 }   
27.             ]    
28.         })    
29. });  

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    tbar: new Ext.Toolbar({ 
        items:[ 
                { 
                    id:'buttonA' 
                    ,text:"Button A" 
                    ,handler: function(){ alert("You clicked Button A"); } 
                } 
               ,
                new Ext.Toolbar.SplitButton({})
                ,{ 
                    id:'buttonB' 
                    ,text:"Button B" 
                    ,handler: function(){ alert("You clicked Button B"); } 
                } 
                ,
                '-'
                ,{
                    id:'buttonc' 
                    ,text:"Button c"
                }
            ] 
        }) 
});

 

11.将GridPanel放入一个Panel或TabPanel中

Js代码

1. var tabs = new Ext.TabPanel({   
2.     collapsible: true  
3.     ,renderTo: 'product-exceptions'  
4.     ,width: 450   
5.     ,height:400   
6.     ,activeTab: 0   
7.     ,items:[   
8.         {   
9.             title: 'Unmatched'  
10.         },{   
11.             title: 'Matched'  
12.         }   
13.     ]   
14. });   
15. tabs.doLayout();   
16. var panel = new Ext.Panel({   
17.     renderTo: 'panel',   
18.     title:'panel',   
19.     collapsible:true,   
20.     width:450,   
21.     height:400,   
22.     items:[grid] //管理grid   
23. });  

var tabs = new Ext.TabPanel({
    collapsible: true
    ,renderTo: 'product-exceptions'
    ,width: 450
    ,height:400
    ,activeTab: 0
    ,items:[
        {
            title: 'Unmatched'
        },{
            title: 'Matched'
        }
    ]
});
tabs.doLayout();
var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:450,
    height:400,
    items:[grid] //管理grid
});

 Panel必须有DIV存在。其包含的Component有items管理。