app.js
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled : true//自动加载
});
Ext.application({
appFolder : 'app',//文件名
name : 'AM',//文件名对应的包名
launch : function() {//回调函数
Ext.create("Ext.container.Viewport", {
loyout : 'auto',//自动布局
items : [{
xtype : 'userlist',
title : 'users',
html : 'list Form users will...'
}]
})
},
controllers : ["Users"]//控制器,对应继承Ext.app.Controller的控制器
});
});
controller/Users.js 控制层
Ext.define("AM.controller.Users",{
extend:'Ext.app.Controller',
init:function(){
//this.control({}); //控制业务逻辑,如按钮事件业务逻辑
},
views:["List"],//视图层
stores:["Users"],//store 和model 共同被称为Ext mvc 的model层
models:["AM.model.User"]
});
view/List.js
Ext.define("AM.view.List", {
extend : 'Ext.grid.Panel',
title : 'Dom',
frame : true,
width : 800,
height : 400,
alias : 'widget.userlist',
multiSelect : true,// 是否可选多条记录
selType : 'checkboxmodel',// 设置选择模式 见Ext.selection包
store : "Users",
columns : [Ext.create('Ext.grid.RowNumberer', {})//添加一列号
, {
text : 'name',
dataIndex : 'name'// 对应model里的fields的name
}, {
text : 'age',
dataIndex : 'age'
}, {
text : 'email',
dataIndex : 'email'
}, {
text : 'action',
icon : '../img/delete.png',
header : 'Action',
handler : function(view, rowIndex, colIndex, item, e) {//单击时触发的函数
alert(view + rowIndex)
},
xtype : 'actioncolumn',// 操作列
width : 60
}, {
header : '拼装',
xtype : 'templatecolumn',//模板列
tpl : '编辑{age} 邮箱{email}'//调用store,或model里的age,email变量
}, {
header : '出生日期',
xtype : 'datecolumn',//日期列 后台无论是yyyy-mm-dd日期还是外国日期都能识别
dataIndex : 'birthday',
width : 80,
format : 'Y-m-d'//日期格式
}, {
text : 'isIt',
dataIndex : 'isIt',
width : 80,
renderer : function(value) {//回调
if (value) {
if (value == '是') {
return "<font color=red>" + value
+ "</font>";
} else {
return "<font color=green>" + value
+ "</font>";
}
}
}
}],
tbar : [{
xtype : 'button',
text : '增加'
}, {
xtype : 'button',
text : '修改'
}, {
xtype : 'button',
text : '删除',
handler : function(o, e) {
// 得到grid
var grid1 = o.findParentByType('grid');
var sModel = grid1.getSelectionModel();// 得到选择模型
var selectedModels = sModel.getSelection();// 得到选择的Ext。data。Model
var names = [];
Ext.each(selectedModels, function(model) {
names.push(model.get('name'));
});
// 访问后台
// 如果后台返回成功则移除
Ext.getCmp('grid_s').getStore()
.remove(selectedModels);
}
}],
dockedItems : [{// 停驻条目
dock : 'bottom',// 悬停方位 可是上、下、左、右 任意一个
xtype : 'pagingtoolbar',// 分页工具栏
store : 'Users',// 根据storeid查找store
displayInfo : true
// 显示 deisplayMsg
}],
initComponent : function() {
this.callParent(arguments);
}
});
store/Users.js
Ext.define("AM.store.Users",{
extend:'Ext.data.Store',
storeId:'user_store',
model:'AM.model.User',
autoLoad:true//很重要
})
model/User.js
Ext.define("AM.model.User", {
extend : "Ext.data.Model",
fields : [{
name : 'name',
type : 'string'
}, {
name : 'age',
type : 'int'
}, {
name : 'email',
type : 'string'
}, {
name : 'birthday',
type : 'string'
}, "isIt"//此处可这样简写
],
proxy : {
type : 'ajax',// 后台加载
url : 'lesson11.jsp',
reader : {
type : 'json',
root : 'storeData'
}
}
});
ext 列模式'Ext.grid.column.Column普通列,Ext.grid.column.Action行为列,'Ext.grid.column.Boolean 布尔型列,'Ext.grid.column.Date'日期列,'Ext.grid.column.Number'数字列,'Ext.grid.column.Template'模板列
分享到:
相关推荐
严格按照MVC架构分的曾,可以运行的extJs4.2MVC示例,在myclipse加到一个项目里的的webroot文件夹下,运行index.html即可
本例是从官方网站示例下载整理解决win7不显示json问题,ExtJs 4.1 mvc 简单示例
配合extjs4.2.0的MVC开发模式教程使用更好
最新版本,ExtJS6 MVC 精简示例!!!,一个可以参考的小例子!
extjs4.0 MVC 示例代码
原本是打算采用EXTJS4 的MVC做应用框架,已完成左侧树菜单、tabpanel(内嵌Grid,带查询及分页功能) 但是由于网络上的相关文章太少,公司对这个框架提出疑问,以后会不会遇到问题,所以改用ext3了...唉
原本是打算采用EXTJS4 的MVC做应用框架,已完成左侧树菜单、tabpanel(内嵌Grid,带查询及分页功能) 但是由于网络上的相关文章太少,公司对这个框架提出疑问,以后会不会遇到问题,所以改用ext3了...唉
自己写的ExtJS4.0用MVC的示例
ASP.NET MVC5 +ExtJS6 表格个人学习示例 仅供学习参考使用
spring mvc+hibernate+extjs代码示例 请将数据库脚本在oracle数据库中执行后 直接运行该程序
extjs4.1部分控件示例 MVC2 VS2010
NULL 博文链接:https://w26.iteye.com/blog/1531181
ExtjsSpringMVC Spring MVC 和 Extjs 5.0 示例
Yan Shi - ExtJS 4 示例仪表板 这是一个使用 ExtJS 4 的示例仪表板。 它是由 ExtJS 图表和网格制作的。 如何跑步 如果你安装了sencha cmd,请cd到这个项目的根目录,输入sencha web start
SpringMVC+ExtJS完美集成(数据传输方式为JSON和model),同时还支持controller页面配置、页面消息可配置(类似于国际化)、intercepter示例。
简单的 spring mvc 应用程序,带有引导皮肤和 extjs 网格组件和嵌入式 H2 数据库。 应用程序由三页组成。 主页以可排序的方式显示所有公司的员工。 其他两个页面显示来自部门 A 和 B 的员工。服务器存储依赖于带有 ...
ExtJS 4.x + CKEditor 这是一个简单的页面,它使用了 ExtJS 中使用的的包装器。如何使用(非MVC) 请参阅包含的示例 index.html 文件。如何使用 (MVC) 通过本地下载的副本或通过 CKEditor CDN 包含 CKEditor。 将 js...
这是GoldArch(本人命名为黄金框架)的中间产品,框架最后成型于asp.net+mvc+spring.net+nhibernate+extjs(and coolite) ,实现了Spring.net+NHibernate的封装。主要是泛型DAO的配置和应用。同时多数据库连接(权限...