<script>
Ext.onReady(function () {
//1.定义Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
}); //2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
}); //3.创建grid
var viewport = Ext.create("Ext.container.Viewport", {
layout: "fit",
items: {
xtype: "grid",
model: "MyApp.model.User",
store: store,
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: '电话', dataIndex: 'phone' }
]
}
}); //4.添加双击编辑
var grid = viewport.down("grid");
grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
//5.创建编辑表单
var win = Ext.create("Ext.window.Window", {
title: "编辑用户",
width: 300,
height: 200,
layout: "fit",
items: {
xtype: "form",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "numberfield", name: "age", fieldLabel: "年龄" },
{ xtype: "textfield", name: "phone", fieldLabel: "电话" }
]
},
buttons: [
{
text: "保存", handler: function () {
win.down("form").updateRecord();
record.commit();
win.close();
}
}
]
});
win.down("form").loadRecord(record);
win.show();
});
});
</script>

extjs最普通的grid的更多相关文章

  1. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  2. Sencha ExtJS 6 Widget Grid 入门

    最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...

  3. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  4. ExtJs中的Grid具体操作(笔记及心得)

    一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex: ...

  5. ExtJS学习(三)Grid表格

    表格说明 Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xty ...

  6. ExtJS实现分页grid paging

    背景 分页查询在Web页面中比例很大,我自己也写过分页框架,也用过很多第三方分页. 基于jquery的dataTables,那么多例子.清晰API.应用广泛.开源,即使是新手也可以很快上手. ExtJ ...

  7. ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案

    今天遇到grid复制的问题,在网上找到了一个解决办法,只需改下CSS和JS,给大家分享一下: 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/dy_paradise/a ...

  8. ExtJs之Ext.grid.GridPanel(部分未完)

    今天在家休息,年假不用就作费啊. 看了几部香港老电影,陪爸爸看了勇士占奇才, 然后,测试了一下EXTJS未完的内容, 在京东上订了七本历史普及书,近两百块..:) 搞定. <!DOCTYPE h ...

  9. ExtJS自制表格Grid分页条

    试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...

随机推荐

  1. linux top 命令---VIRT,RES,SHR,虚拟内存和物理内存(

    VIRT,RES,SHR,虚拟内存和物理内存(转) VIRT: 1.进程"需要的"虚拟内存大小,包括进程使用的库.代码.数据,以及malloc.new分配的堆空间和分配的栈空间等: ...

  2. A - 娜娜梦游仙境系列——诡异的钢琴

    A - 娜娜梦游仙境系列——诡异的钢琴 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Othe ...

  3. 经典.net面试题目(3)

    1. asp.net中web应用程序获取数据的流程: A.Web Page B.Fill  C.Sql05  D.Data Sourse  E.DataGrid  F.DataSet  G.Selec ...

  4. 关于Adobe CC 系列软件反复弹出 Adobe 软件许可问题

    最近装了falsh cc2014 版本,并结合网络提供资源破解(可参考:http://www.cnblogs.com/-yan/p/4450196.html) 但是,使用超过二十四小时后(时间为估计值 ...

  5. project文件问题

    到编译文件中看看,红色的删除,坤哥这样做的 .

  6. vi 使用教程

    编辑一个文本文件是经常使用到的计算机操作.我们想做的大多数事情都需要使用某种文件编辑.文本编辑器会方便文件的创建和修改.编辑一个文本文件是经常使用到的计算机操作.我们想做的大多数事情都需要使用某种文件 ...

  7. 获取输入设备的vid和pid

    一.获取/dev/input/event16设备的vid和pid testhid.c #include <linux/types.h> #include <linux/input.h ...

  8. word project 2010破解

    1.用这个工具提示失败: failed to inject memory Failed to inject memory!解决方法 浏览:6545 | 更新:2013-07-15 15:52 在激活o ...

  9. UVA 571 Jugs ADD18 小白书10 数学Part1 专题

    只能往一个方向倒,如c1=3,c2=5,a b从0 0->0 5->3 2->0 2->2 0->2 5->3 4->0 4->3 1->0 1- ...

  10. UIImageView 浅析

    UIImageView summary UIImageView极其常用,功能比较专一:显示图片 pooperty @property(nonatomic,retain) UIImage *image; ...