ExtJS创建Grid

本文介绍如何使用 ExtJS 框架实现一个简单的表格显示功能。通过定义数据结构、创建 JsonStore 和 GridPanel,实现了包含姓名、住址和电话三列的表格。此示例适用于初学者了解 ExtJS 的基本表格组件用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ext.onReady(function()

                {

                     // 构造表格的数据 

                     var  data = [

                    {id:1,X0:'小明',X1:'沈阳',X2:'111'}, 

                    {id:2,X0:'小强',X1:'大连',X2:'222'},

                    {id:3,X0:'小力',X1:'北京',X2:'333'},

                    {id:4,X0:'小刚',X1:'上海',X2:'444'}];                                 

                    // 数据字段指定 

                     var  store =new Ext.data.JsonStore({data:data,fields:["id","X0","X1","X2" ]});

                     // 建立表格对象 

                     var grid  =new Ext.grid.GridPanel(

                    {

                          renderTo:"hello" , // 绑定的DIV ID 

                          title:"标题 " ,

                          height:150 ,

                          width:400 ,

                     // 表格头 

                    cm:new  Ext.grid.ColumnModel([

                    {header:"姓名",dataIndex:"X0",sortable:true },

                    {header:"住址",dataIndex:"X1",sortable:true },

                    {header:"电话",dataIndex:"X2",renderer:show}]),

                    store:store,

                    autoExpandColumn: 2 

                     }); 

                     }); 

-------------------------------------------------------------

id="hello"

转载于:https://www.cnblogs.com/bboyxiaoming/archive/2011/10/20/2218536.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值