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提供了丰富的API和...
严格按照MVC架构分的曾,可以运行的extJs4.2MVC示例,在myclipse加到一个项目里的的webroot文件夹下,运行index.html即可
通过学习这个小例子,你可以了解到ExtJS4.2 MVC的架构是如何工作的,如何组织代码,以及如何利用MVC模式开发复杂的Web应用。这对你提升JavaScript编程技巧,尤其是前端开发技能,特别是对于需要处理大量数据和交互的...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架,它结合了MVC(Model-View-Controller)设计模式,为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库,专门用于创建...
03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,同时实现后台查询 08.实现添加文章功、优化...
ExtJs4.2强调MVC模式,将应用划分为Model(数据模型)、View(视图)和Controller(控制器)三部分,这样可以保持前端代码结构清晰,便于管理。 在本实例中,我们完全遵循ExtJs4.2的MVC模式,将应用分为对应的Model...
### Extjs 4.2.0 MVC 架构详解及官方文档中文示例 #### 一、文件结构 在Extjs 4.2.0中,为了更好地组织和管理代码,采用了一种标准的文件结构。这种结构不仅有助于提高代码的可读性和可维护性,还能确保团队成员...
EXTjs4.2中文版是EXTjs框架的一个重要版本,EXTjs是一个强大的JavaScript库,专门用于构建用户界面,尤其适用于创建富互联网应用程序(Rich Internet Applications,简称RIA)。它以其组件化的设计理念,丰富的UI...
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
ExtJS 4.2 是一个流行的JavaScript框架,用于...以上就是关于在ExtJS 4.2中实现MVC模式下左菜单动态加载功能的基本步骤和关键知识点。实际开发中,还需要根据具体需求进行调整和完善,例如增加权限控制、错误处理等。
注:用到了 EXTJS 的 MVC 修改webconfig的sql密碼後 遠行項目 隨便輸入什麼點登錄 會自動生成數據庫 生成數據庫之後執行下面的語句 添加種子數據 --數據庫種子數據 use EXTMVC insert [dbo].[users] values('...
ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一套完整的组件库,包括数据管理、图表、表格、菜单、工具栏等,使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整,最规范的。
根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法,帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架,用于创建...
Extjs4.2入门教程详解,及API文档。