Grid是第一个要学的,Ext也一样,体验了一把,感觉MVC下用起来还是很爽的啊!
记录一下,免得忘了。
功能很简单,显示用户密码,然后CURD
view在此
Ext.define('PJ.view.UserInfoPanel', {
extend: 'Ext.panel.Panel',
alias : 'widget.userinfopanel',
store : 'UserInfo',
layout: {
type: 'border'
},
title: '用户管理',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
tbar : [{
text : '添加',
action : 'add',
iconCls : 'add_btn'
},{
text : '删除',
action : 'del',
iconCls : 'del_btn'
},{
text : '保存',
action : 'save',
iconCls : 'save_btn'
}],
items: [
{
xtype: 'gridpanel',
region: 'center',
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
id : 'rowEditing',
clicksToEdit: 1
})
],
store : 'UserInfo',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'username',
text: '用户名',
editor : {
xtype : 'textfield',
allowBlank : false
}
},
{
xtype: 'gridcolumn',
dataIndex: 'password',
text: '密码',
editor : {
xtype : 'textfield',
allowBlank : false
}
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'UserInfo',
dock: 'bottom',
displayInfo: true
}]
}
]
});
me.callParent(arguments);
}
});
简单的model
Ext.define('PJ.model.UserInfo',{
extend : 'Ext.data.Model',
fields : ['username','password']
});
小小的store
Ext.define('PJ.store.UserInfo',{
extend : 'Ext.data.Store',
model : 'PJ.model.UserInfo',
autoLoad : false,
autoSync : false,
proxy : {
type : 'ajax',
api : {
read : '/sshe/userAction!userlist.action',
create : '/sshe/userAction!reg.action',
update : '/sshe/userAction!changepassword.action',
destroy : '/sshe/userAction!delUser.action'
},
reader: {
root : 'obj',
type: 'json',
successProperty: 'success'
},
writer : {
type : 'singlepost'
}
}
});
最后是核心controller
Ext.define('PJ.controller.UserInfoList',{
extend : 'Ext.app.Controller',
views : ['UserInfoPanel'],
stores : ['UserInfo'],
models : ['UserInfo'],
init : function(){
this.control({
'userinfopanel>gridpanel':{
render : this.loadUserInfo
},
'userinfopanel>toolbar button[action=add]':{
click : this.addUser
},
'userinfopanel>toolbar button[action=del]':{
click : this.delUser
},
'userinfopanel>toolbar button[action=save]' : {
click : this.saveUserInfo
}
});
},
loadUserInfo : function(obj){
var store = obj.getStore();
store.load();
},
addUser : function(btn){
var store = btn.up('panel').down('gridpanel').getStore();
var r = Ext.create('PJ.model.UserInfo',{
username : '用户名',
password : '密码'
});
store.insert(0,r);
var rowEditing = btn.up('panel').down('gridpanel').editingPlugin;
rowEditing.startEdit(0, 0);
},
delUser : function(btn){
var store = btn.up('panel').down('gridpanel').getStore();
var grid = btn.up('panel').down('gridpanel');
var sm = grid.getSelectionModel();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
};
},
saveUserInfo : function(btn){
var store = btn.up('panel').down('gridpanel').getStore();
store.sync({
callback : function(store){
Ext.Msg.alert('提示',store.proxy.reader.jsonData.msg);
}
});
}
});
层次分明,结构合理,一目了然,咳咳,当然这个是一次递交一个修改,批量的话还是要修改一下
截图留念
- 大小: 8.1 KB
分享到:
相关推荐
基于EXTJS 4.2 MVC环境搭建,并从后台获取数据在extjs Grid上显示出来
严格按照MVC架构分的曾,可以运行的extJs4.2MVC示例,在myclipse加到一个项目里的的webroot文件夹下,运行index.html即可
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
去除extjs4.2MVC中的Model层和Store层,使用工厂模式来创建Model层和Store层简化代码。
ExtJS的mvc做得不错,周末2天研究了一下,做了个小例子,有兴趣的同学可以拿来看看,解压后直接在浏览器打开就可以看到效果了。
03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,同时实现后台查询 08.实现添加文章功、优化...
Extjs 4.2.0官方文档上关于MVC architecture的例子,翻译成中文
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
extjs4.2 desktop mvc下载直接使用
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
注:用到了 EXTJS 的 MVC 修改webconfig的sql密碼後 遠行項目 隨便輸入什麼點登錄 會自動生成數據庫 生成數據庫之後執行下面的語句 添加種子數據 --數據庫種子數據 use EXTMVC insert [dbo].[users] values('...
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
extjs 4.2 参考书 开发
Extjs4.2入门教程详解,及API文档。
下拉(条件)搜索实例extjs4.2(亲测可用).在前辈的基础上增加了php后台数据的调取整合和下拉搜索的联动
ExtJs4.2正式版
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
NULL 博文链接:https://pjwqq.iteye.com/blog/1991258
SpringMVC+ExtJs4.2实例 导入项目链接数据库即可运行 数据库用的是MySql 完全遵循ExtJs4.2的MVC模式来分成