注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Start Know

自分を信じて、自分で一定でいけます

 
 
 

日志

 
 

ExtJs grid使用详细[转]  

2009-04-09 22:38:00|  分类: Ext-Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Ext2.0是一个javascript框架,它的Grid控件和其它可以显示数据的控件,能够支持多种数据类型,如二维数组、Json数据和XML数据,甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。

首先,一个表格应该有列定义,即定义表头ColumnModel:

// 定义一个ColumnModel,表头中有四列

var cm = new Ext.grid.ColumnModel([

     {header:'编号',dataIndex:'id'},

     {header:'性别',dataIndex:'sex'},

     {header:'名称',dataIndex:'name'},

     {header:'描述',dataIndex:'descn'}

]);

cm.defaultSortable = true;

    该ColumnModel定义了表格的四个列,其每列的名称和对应的数据键。请注意defaultSortable属性,即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能,可以设置:

{header:'编号',dataIndex:'id',Sortable:true},

现在就来看看这个Ext.data.Store是如何转换三种数据的。

1.二维数组:

// ArrayData

var data = [

     ['1','male','name1','descn1'],

     ['2','male','name1','descn2'],

     ['3','male','name3','descn3'],

     ['4','male','name4','descn4'],

     ['5','male','name5','descn5']

];

// ArrayReader

var ds = new Ext.data.Store({

     proxy: new Ext.data.MemoryProxy(data),

     reader: new Ext.data.ArrayReader({}, [

        {name: 'id',mapping: 0},

         {name: 'sex',mapping: 1},

         {name: 'name',mapping: 2},

         {name: 'descn',mapping: 3}

     ])

});

ds.load();

ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。

现 在用的是Ext.data.MemoryProxy,它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数 组,并且告诉我们它会按照定义的规范进行解析,每行按顺序读取四个数据,第一个叫id,第二个叫sex,第三个叫name,第四个descn。这些是跟 cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。

mapping属性用于标记data中的读取后的数据与标头的映射关系,一般是不用设置的。但如果我们想让sex的数据中name栏中出现,可以设置mapping值。即id的mapping为2,后者为0。

记得要执行一次ds.load(),对数据进行初始化。

数据的显示显得非常简单:

HTML文件:

<div id='grid'></div>

JS文件:

var grid = new Ext.grid.GridPanel({

     el: 'grid',

     ds: ds,

     cm: cm

});

grid.render();

其显示结果为:

2.如何在表格中添加CheckBox呢?

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'}

]);

var grid = new Ext.grid.GridPanel({

    el: 'grid3',

    ds: ds,

    cm: cm,

    sm: sm,//添加的地方

    title: 'HelloWorld'

});

3. 如何做Grid上触发事件呢?

下面是一个cellclick事件

grid.addListener('cellclick', cellclick);

function cellclick(grid, rowIndex, columnIndex, e) {

    var record = grid.getStore().getAt(rowIndex);   //Get the Record

    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name

    var data = record.get(fieldName);

    Ext.MessageBox.alert('show','当前选中的数据是'+data);

}

4.如何做Grid中做出快捷菜单效果:

grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分

var rightClick = new Ext.menu.Menu({

    id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素

    items: [

        {

            id: 'rMenu1',

            handler: rMenu1Fn,//点击后触发的事件

            text: '右键菜单1'

        },

        {

            //id: 'rMenu2',

            //handler: rMenu2Fn,

            text: '右键菜单2'

        }

    ]

});

function rightClickFn(grid,rowindex,e){

    e.preventDefault();

    rightClick.showAt(e.getXY());

}

function rMenu1Fn(){

   Ext.MessageBox.alert('right','rightClick');

}

其Grid如下:

5.如何将一列中的数据根据要求进行改变呢?

比如说性别字段根据其male或female改变显示的颜色,这种ColumnMode中设计:

var cm = new Ext.grid.ColumnModel([

    new Ext.grid.RowNumberer(),

    sm,

    {header:'编号',dataIndex:'id'},

    {header:'性别',dataIndex:'sex',renderer:changeSex},

    {header:'名称',dataIndex:'name'},

    {header:'描述',dataIndex:'descn'}

]);

cm.defaultSortable = true;

function changeSex(value){

    if (value == 'male') {

        return "<span style='color:red;font-weight:bold;'>红男</span>";

    } else {

        return "<span style='color:green;font-weight:bold;'>绿女</span>";

    }

}其它两种数据的Grid显示是相同的,其不同之处在于数据获取的过程:

6.Json数据

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

//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 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:

<%

    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数据:

{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的数据:

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工具条:

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中

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管理。

  评论这张
 
阅读(1624)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017