extjs最普通的grid
的
<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的更多相关文章
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- Sencha ExtJS 6 Widget Grid 入门
最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- ExtJs中的Grid具体操作(笔记及心得)
一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex: ...
- ExtJS学习(三)Grid表格
表格说明 Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xty ...
- ExtJS实现分页grid paging
背景 分页查询在Web页面中比例很大,我自己也写过分页框架,也用过很多第三方分页. 基于jquery的dataTables,那么多例子.清晰API.应用广泛.开源,即使是新手也可以很快上手. ExtJ ...
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
今天遇到grid复制的问题,在网上找到了一个解决办法,只需改下CSS和JS,给大家分享一下: 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/dy_paradise/a ...
- ExtJs之Ext.grid.GridPanel(部分未完)
今天在家休息,年假不用就作费啊. 看了几部香港老电影,陪爸爸看了勇士占奇才, 然后,测试了一下EXTJS未完的内容, 在京东上订了七本历史普及书,近两百块..:) 搞定. <!DOCTYPE h ...
- ExtJS自制表格Grid分页条
试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...
随机推荐
- properties读取的几种方法
第一种: private static Properties prop = new Properties(); static{ try { prop.l ...
- EF6 第一次,或者相隔一段时间变慢咋办? 我们来优化下
第一.问题原因分析 EF方面的原因: 1.Code First第一次启动会对比程序中的Model与数据库表(database initializer ),生成Model与数据库的映射视图 2.随着EF ...
- 给php代码添加规范的注释phpDocumentor
给php代码添加规范的注释更多参考 http://phpdoc.org/docs/latest/index.html在phpdocumentor中,注释分为文档性注释和非文档性注释.所谓文档性注释,是 ...
- Qt之中文显示(QMessageBox、QLineEdit右键菜单等)
来源:http://blog.sina.com.cn/s/blog_a6fb6cc90101art3.html 在编写Qt程序的时候,总会碰到中文问题,一直都很困惑,原本在使用QLineEdit的时候 ...
- C++11 半同步半异步线程池的实现
#include <list> #include <mutex> #include <thread> #include <condition_variable ...
- Anton and Chess
Anton and Chess time limit per test 4 seconds memory limit per test 256 megabytes input standard inp ...
- CodeForces 719B Anatoly and Cockroaches 思维锻炼题
题目大意:有一排蟑螂,只有r和b两种颜色,你可以交换任意两只蟑螂的位置,或涂改一个蟑螂的颜色,使其变成r和b交互排列的形式.问做少的操作次数. 题目思路:更改后的队列只有两种形式:长度为n以r开头:长 ...
- WinRAR5.31 注册码
RAR registration dataState Grid Corporation Of China50000 PC usage licenseUID=5827a0bd1c43525d0a5d64 ...
- NDK Build 用法(NDK Build)
1.ndk-build的用法 Android NDKr4引入了一个新的.小巧的shell脚本ndk-build,来简化源码编译. 该文件位于NDK根目录,进入你的工程根目录或子目录之后,在命令行下调用 ...
- HDU 5833 (2016大学生网络预选赛) Zhu and 772002(高斯消元求齐次方程的秩)
网络预选赛的题目……比赛的时候没有做上,确实是没啥思路,只知道肯定是整数分解,然后乘起来素数的幂肯定是偶数,然后就不知道该怎么办了… 最后题目要求输出方案数,首先根据题目应该能写出如下齐次方程(从别人 ...