<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. .net项目svn项目管理文件清单

    You can add the following files to Visual Studio source control: Solution files (*.sln). Project fil ...

  2. JSP内置对象--4种属性范围 (pageContext,request,session,application)

    pageContext: javax.servlet.jsp.JspContext抽象类的父类JspContext 中有以下方法. request:javax.servlet.http.的接口Http ...

  3. JSP注释及scriptlet <%局部%><%!全局%><%=输出%>

    显示注释: <!--注释内容-->> 隐式注释: 1. // 2./* */ 3. <%-- 注释内容--%> <!-- 这个注释客户端就可以看见 --> & ...

  4. 二分 Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) D

    http://codeforces.com/contest/722/problem/D 题目大意:给你一个没有重复元素的Y集合,再给你一个没有重复元素X集合,X集合有如下操作 ①挑选某个元素*2 ②某 ...

  5. Array.length vs Array.prototype.length

    I found that both the Array Object and Array.prototype have the length property. I am confused on us ...

  6. layer属性

    键: 值 描述 下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格.如是调用: $.layer({键: 值, 键: 值, -}); type: 0 层的类型.0:信息框(默 ...

  7. 从拉动APP下载谈运营

    声明:这篇文章是前京东产品运营刘玮东的作品,我转过来主要方便以后自己温故,也怕这样的好文给漏或者找不到了. 当时面临的新课题就是如何用H5拉动APP的下载,背景是我们的渠道和发动传播的第一波用户不够多 ...

  8. git 强制覆盖本地文件

    git fetch --all git reset --hard origin/master git pull

  9. debian 安装 android studio 环境

    jdk环境变量配置: ~/.hashrc export JAVA_HOME=/usr/share/jdk1.8.0_92 export PATH=$JAVA_HOME/bin:$PATH export ...

  10. HDU 3038 How Many Answers Are Wrong (并查集)---并查集看不出来系列-1

    Problem Description TT and FF are ... friends. Uh... very very good friends -________-bFF is a bad b ...