`
Jellen129
  • 浏览: 61982 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

制作一个简单的表格

EXT 
阅读更多

/*制作一个简单的表格
 1.首先设置好表的列模型(列数、每列的名称、类型、如何显示、header/dataIndex,二维的)Ext.grid.ColumnModel
 2.第二,添加数据(二维数组) var data=...
 3.第三,转换原始数据,用Ext.data.Store 创建一个数据存储对象(proxy/reader),或者直接用SimpleStore
 4.用Ext.grid.GridPanel把原始数据和转换的数据装配在一起
 */

 var colM=new Ext.grid.ColumnModel([
    {header:"编号",dataIndex:"id"},
    {header:"姓名",dataIndex:"name"},
    {header:"性别",dataIndex:"sex"},
    {header:"年龄",dataIndex:"age"},
    {header:"电邮",dataIndex:"email"},
  ]);
 
 var data=[['1','wang','男','20','wang@163.com'],
    ['2','wang2','男','20','wang@163.com'],
    ['3','wang3','男','20','wang@163.com'],
    ['4','wang4','男','20','wang@163.com'],
    ['5','wang5','男','20','wang@163.com']
     ];
 

  var store= new Ext.data.Store({

                    proxy:new Ext.data.MemoryProxy(data),
                    reader:new Ext.data.ArrayReader({},[{name:'id'},
                        {name:'name'},
                        {name:'sex'},

                        {name:'age'},

                        {name:'email'}

                  ]),
    });
 //var store=new Ext.data.SimpleStore({data:data,fields:['id','name','sex','age','email']});
 
 
 var grid=new Ext.grid.GridPanel({
  renderTo:'test',//渲染到id为test的页面中
  title:'test',
  height:200,
  cm:colM,
  store:store,

 });

分享到:
评论

相关推荐

    前端教程:10 简单表格制作

    千锋Web前端教程_10_简单表格制作

    C#pdf制作,itextsharp文件外加在网上下的一个制作表格的案例

    itextsharp文件外加在网上下的一个制作表格的案例 第一部分 iText的简单应用 第一章 创建一个Document 第一步 创建一个Document实例: 第二步 创建Writer实例 第三步 打开Document 第四步 添加内容 第五步,...

    js简单的表格操作

    以下是一个简单的示例: ```javascript let table = document.createElement('table'); let row = document.createElement('tr'); let cell1 = document.createElement('td'); let cell2 = document.createElement...

    制作简单表格分享.pdf

    【制作简单表格分享.pdf】 本教程主要介绍了如何在Word中制作简单的...通过这一系列的教学步骤,学生不仅能掌握制作简单表格的技能,还能在实践中提升信息处理能力和团队协作技巧,为今后的学习和生活提供了实用工具。

    制作简单表格PPT学习教案.pptx

    【制作简单表格PPT学习教案】是一份针对初学者的专业资料,主要讲解如何在Word中创建和编辑简单表格。这份教案共分为13页,详细介绍了制作表格的基本步骤和技巧。 1. **学习任务**: - 学习在Word中插入简单表格,...

    html制作简单的表格源码.zip

    html表单制作及实例html制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.ziphtml制作简单的表格源码.zip

    一个简单的表格VBA日历窗体

    本主题涉及的是一个利用VBA创建的简单日历窗体,它可以帮助用户更直观地选择日期,并能与Excel表格数据进行交互。这个日历窗体特别适合于那些需要频繁输入或管理日期信息的工作表。 首先,让我们详细了解一下VBA...

    LaTeX中表格的制作

    例如,一个简单的表格可以这样创建: ```latex \begin{tabular}{|c|c|c|} \hline 列1 & 列2 & 列3 \\ \hline 行1 & 数据1 & 数据2 \\ \hline 行2 & 数据3 & 数据4 \\ \hline \end{tabular} ``` 在这个例子中,`{|c...

    制作Word表格.rar

    1. **创建表格**:首先,用户可以在Word文档中通过“插入”菜单选择“表格”,然后在弹出的网格中选择行数和列数来创建一个新的表格。快捷键`Ctrl+Shift+T`也可以快速插入表格。 2. **调整表格大小**:一旦表格创建...

    简单的excel表格制作-xls表格制作.pdf

    简单的excel表格制作-xls表格制作.pdf

    表格制作-高级教程,详细说明表格的基本内容

    9.1.6 表格的嵌套与布局在复杂网页设计中,常常会用到表格的嵌套,即在一个表格内嵌入另一个表格,以实现更精细的布局。通过嵌套表格,可以创建复杂的网格系统,用于展示数据或者构建复杂的页面结构。但需要注意,...

    基于Bootstrap使用jQuery实现简单可按钮编辑一行多个表格

    本项目“基于Bootstrap使用jQuery实现简单可按钮编辑一行多个表格”旨在为开发者提供一个易于实施、功能直观的表格编辑解决方案。下面将详细阐述这个方案的核心知识点。 1. **Bootstrap框架**:Bootstrap是由...

    HTML简单表格制作(购物)

    HTML简单表格制作(购物)

    CGridCtrl插件制作的简单表格

    在本文中,我们将深入探讨如何使用CGridCtrl插件在VC6.0环境下基于MFC构建一个简单的表格应用。CGridCtrl是一个强大的MFC类库,它为开发人员提供了创建类似电子表格的用户界面的能力,使得在Windows应用程序中实现...

    简单的excel表格制作xls表格制作.doc

    Excel表格制作是一个基础而重要的技能,广泛应用于数据分析、财务管理、项目管理等领域。以下是一份详细的Excel表格制作步骤和技巧: 1. **新建Excel文件**:在电脑桌面或任意磁盘位置,通过右键菜单选择“新建”,...

    小学信息技术四年级上册制作简单表格PPT教案.pptx

    学生需要按照“规则一”来创建一个7行6列的表格,并填充首行首列的内容,这涉及到了基础的表格插入和文字输入操作。接着,学生将学习如何修改表格,如在表格下方添加新行和删除行,这是对表格结构进行调整的基本技巧...

    HTML框架,表格

    以下是一个简单的表格实例: ```html 员工信息 姓名 职位 薪水 张三 经理 <td>10000元 李四 工程师 <td>8000元 ``` 这个例子创建了一个包含表头和两行数据的表格,每列数据分别对应员工的...

    小学信息技术四年级制作简单表格.pptx

    在教学内容中,首先展示了火车时刻表的例子,这是表格应用的一个基本场景。通过这个例子,学生可以了解到表格的基本结构,包括列(车次、始发站、列车类型、发车时间、到站、到站时间、运行时间和票价)和行(不同的...

    制作一个简单HTML公司官网网页设计(HTML+CSS)

    该作业的主要目标是设计与制作一个简单的HTML公司官方网站。这样的网站适用于多种场景,包括但不限于企业介绍、产品展示和服务说明等。根据题目描述,我们可以了解到这个项目是面向学生的,旨在通过实际操作帮助他们...

Global site tag (gtag.js) - Google Analytics