extjs grid的一个实例

最新推荐文章于 2021-02-19 10:52:33 发布

原创最新推荐文章于 2021-02-19 10:52:33 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

EXTJS 专栏收录该内容

43 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建网格面板的例子。该网格包含id、name、email、sex和age五列，并通过SimpleStore存储数据。示例中详细介绍了如何定义ColumnModel和GridPanel配置。

Ext.onReady(function(){



    var data = [["id1","name1","email1","sex1","age1"],
                ["id2","name2","email2","sex2","age2"],
                ["id3","name3","email3","sex3","age3"],
                ["id4","name4","email4","sex4","age4"],
                ["id5","name5","email5","sex5","age5"]
             ];

    var fields = ["id","name","email","sex","age"];

    //var render = new Ext.data.Record();


    var cm = new Ext.grid.ColumnModel([{

        header:"id",
        dataIndex:"id"
    },{

        header:"name",
        dataIndex:"name"
    },{

        header:"email",
        dataIndex:"email"
    },{

        header:"sex",
        dataIndex:"sex"
    },{

        header:"age",
        dataIndex:"age"
    }]) ;


    var store = new Ext.data.SimpleStore({

        fields:fields,
        data:data
    });

    var grid = new Ext.grid.GridPanel({

        title:"title",
        height:800,
        cm:cm,
        store:store

    });


//    var viewport = new Ext.Viewport({
//
//        id:'desk',
//        layout:'border',
//        items:[{region:"north",height:50},
//            {region:"west",width:200},
//                {region:"center"}],
//
//    })

    grid.render(Ext.getBody());


});