Extjs4--简单的Grid表格

来源：互联网发布：数组排序jquery 编辑：程序博客网时间：2024/04/30 19:34

Extjs4--简单的Grid表格

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" type="text/css" href="../resources/css/ext-all-debug.css" /><title>Insert title here</title><script type="text/javascript">Ext.onReady(function(){//创建StoreExt.create('Ext.data.Store', {    storeId:'simpsonsStore',    //fields：指定返回至前段的字段。 自动创建Ext.data.Model对象    fields:['name', 'email', 'phone'],    //Json数据    data:{    //根节点为items    'items':[        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }    ]},    proxy: {    //数据来自于内存        type: 'memory',        reader: {            type: 'json',            //取节点为items下的所有数据            root: 'items'        }    }});//创建表格Ext.create('Ext.grid.Panel', {    title: 'Simpsons',    //查找id为simpsonsStore的Store对象    store: Ext.data.StoreManager.lookup('simpsonsStore'),    columns: [         //text：title名称。dataIndex对应store的fields。        { text: 'Name',  dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' }    ],    height: 150,    width: 400,    renderTo: Ext.getBody()});});</script></head><body></body></html>

目录结构：

运行结果：

0 0