- 浏览: 86158 次
- 性别:
最新评论
-
JF辰泉:
能不能说一下如何解决弹出页面的隐藏地址栏问题:IE7以上,为了 ...
【转】JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 -
lzbcrs:
发个完整的行不 误人子弟 简单的demo 还发的不全 无语了
Extjs4 tree右键菜单实现 -
汽车城路:
我怎么用的不行啊
Extjs 处理Session过期的方法 -
hamlzf:
好像不能用啊
Extjs4 tree右键菜单实现 -
ashou1986:
...
Extjs4 tree右键菜单实现
Extjs 角角落落整理(一)MVC模式
Extjs的MVC结构
app
controller
model
store
util
view
app.js
index.html
app是整个项目的根目录
controller放置ext的控制器,处理业务
model放置一些模型,这个与下面的store是关联的(要在contoreller定义)
store放置grid等组件的store(要在contoreller定义)
util放置帮助文件,主要是一些公共方法抽取放到util里面(要在contoreller注明)
view放置视图组件比如window、grid、tree等(要在contoreller定义)
app.js开启动态加载
index.html项目首页
app.js代码示例
组件的命名规范
以view下面的组件为例(store、model、util类似)
现在写一个viewport,viewport是放在view下面的,同时命名要大写,结构:命名空间+文件夹+名字
comtroller写法,我们现在定义SearchController,放在controller下面
comtroller声明了stores、views、models
Extjs的MVC结构
app
controller
model
store
util
view
app.js
index.html
app是整个项目的根目录
controller放置ext的控制器,处理业务
model放置一些模型,这个与下面的store是关联的(要在contoreller定义)
store放置grid等组件的store(要在contoreller定义)
util放置帮助文件,主要是一些公共方法抽取放到util里面(要在contoreller注明)
view放置视图组件比如window、grid、tree等(要在contoreller定义)
app.js开启动态加载
index.html项目首页
app.js代码示例
/** * 应用层 * className:开启动态加载 */ Ext.onReady(function(){ Ext.QuickTips.init();//支持tips提示 Ext.Loader.setConfig( { enabled : true });//意思是开启Ext.Loader Ext.Loader是动态加载的核心 Ext.Loader.setPath('Ext.ux', extPath+'/Extjs4/examples/ux'); Ext.require([ 'Ext.selection.CellModel', 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.form.*', 'Ext.ux.CheckColumn' ]); Ext.application({ //命名空间 name: 'LP', //应用的根目录 appFolder : extPath+'/app', autoCreateViewport : true, //声明所用到的控制层 controllers: [ 'LP.controller.LPController' // 'LP.controller.SearchController' ], //当前页面加载完成执行的函数 launch: function() { Ext.override(Ext.view.BoundList,{ onMaskBeforeShow: function(args){ var loadingHeight = this.loadingHeight; this.getSelectionModel().deselectAll(); if(loadingHeight){ this.setCalculatedSize(undefined, loadingHeight); } return this.isVisible(); } }); if(Ext.grid.RowEditor) {//按钮汉化问题 Ext.apply(Ext.grid.RowEditor.prototype, { saveBtnText: '保存', cancelBtnText: '取消', errorsText: '错误信息', dirtyText: '已修改,你需要提交或取消变更' }); } } }); });
组件的命名规范
以view下面的组件为例(store、model、util类似)
现在写一个viewport,viewport是放在view下面的,同时命名要大写,结构:命名空间+文件夹+名字
Ext.define('LP.view.Viewport',{ extend: 'Ext.Viewport', layout: 'border',//viewport 以fit布局 alias:'widget.viewPort',//别名 defaults:{ // bodyStyle:'padding 2px' },//样式 requires : [ 'LP.view.North',//头部区域 'LP.view.West',//左侧树 'LP.view.Center',//中间展示区域 'LP.view.East',//右侧区域 'LP.view.South'//底部footer ], initComponent : function(){ var me = this; Ext.apply(me, { items: [ { xtype: 'box', id:"header-panel", region: 'north', html: '<h1> lindenpat</h1>', height: 30 }, { xtype:'eastPanel' ,margins: '2 5 0 0', }, { xtype:'westPanel' ,margins: '2 0 0 5', },{ xtype:'centerPanel' ,margins: '2 0 0 0', }, { xtype:'southPanel' ,margins: '0 5 5 5', } ] }); me.callParent(arguments); } });
comtroller写法,我们现在定义SearchController,放在controller下面
Ext.define('LP.controller.SearchController',{ extend:'Ext.app.Controller', stores:[// 都是应该空间名称,不能应用的别名 'LP.store.WestTreeStore', ], views:[ 'LP.view.Viewport','LP.view.tree.WestTree', ], models:[ 'LP.model.CenterGridModel' ], refs:[ {ref: 'viewPort',selector:'viewPort'},// viewPort内容 {ref: 'westPanel',selector:'westPanel'},// westPanel内容 {ref: 'westTree',selector:'westTree'},// westTree内容 {ref: 'eastPanel',selector:'eastPanel'},// eastPanel内容 {ref: 'centerPanel',selector:'centerPanel'},// centerPanel内容 {ref: 'centerFormPanel',selector:'centerFormPanel'}, {ref: 'button[id=FormButton1]',selector:'centerPanel > centerFormPanel > button[id=FormButton1]'},// 中间面板 ], GridUtil:Ext.create('LP.util.GridDoActionUtil'), init:function(){ this.control({ 'button[id=logic-add1]':{// 逻辑库 添加 click:function(btnObj){ if (typeof(Ext.getCmp('addLogicWindowId')) == 'undefined') { var win= Ext.create('LP.view.window.AddLogicWindow'); win.show(); }else{ Ext.getCmp('addLogicWindowId').show(); } } } }); } });
comtroller声明了stores、views、models
发表评论
-
Extjs 处理Session过期的方法
2012-07-06 14:34 4603在拦截器中为session过期的请求设置一个应答状态 St ... -
转:ExtJS 4: How to add Tooltip to Grid Header
2012-07-03 18:20 1627This tutorial will walk through ... -
转:struts2拦截器实现权限控制
2012-06-28 13:50 1098在使用struts2框架开发一个办公OA系统时候,需要使用到权 ... -
Extjs 角角落落整理(三)tree的使用
2012-06-26 15:40 1213一:延时加载 定义一个BottomTree Ext.def ... -
Extjs 与 struts2 结合
2012-06-25 11:06 988实际应用 Extjs4、struts2 Extjs处理业务逻辑 ... -
Extjs 角角落落整理(一)tabpanel title不固定以及title加tooltip
2012-06-25 10:05 2324需求:tabpanel title不固定以及title加too ... -
Extjs4 tree右键菜单实现
2012-05-24 17:58 7776直接上代码 var tree = Ext.create(' ... -
Ext 颜色选择器使用
2012-05-09 11:18 4997直接上代码: Ext.onReady( functio ... -
Ext checkbox的问题
2012-03-23 17:28 898在实际项目中,要求只能通过点击checkbox列才能进行行选择 ... -
Extjs 下拉框错位解决方式
2012-03-20 16:57 1234Extjs 下拉框错位解决方式 错位可参看附件图 {head ... -
Extjs4 生成动态grid
2012-02-24 11:22 2811需求:grid的header不确定,可进行灵活配置 解决方法: ... -
Ext propertygrid用法
2012-02-22 15:04 1448var propertyGrid = new Ext.grid ... -
JAVA中的FILE.SEPARATOR
2012-02-21 16:40 0前些天遇到一个问题,困扰了好久,现在终于解决了。 问题:上传 ... -
<load-on-startup>讲解
2011-12-06 15:58 0有同学对<load-on-startup> n & ... -
jsp页面中的cookie
2011-12-06 13:56 775今天讲到cookie 添加cookie代码 Cookie ... -
servlet乱码
2011-12-06 13:32 780某位同学servlet接受出现的乱码 jsp 是utf-8 s ... -
转载 <context-param>与<init-param>的区别与作用
2011-12-06 11:01 638<context-param>的作用: web.x ... -
web.xml配置context-param
2011-12-06 10:55 819发现某学生在web.xml配置 <context-par ... -
jsp与servlet 概念讲解ServletContext getServletConfig
2011-12-06 10:32 1525getServletConfig() ... -
myeclipse设置提示
2011-12-01 15:25 927有些朋友的MyEclipse,alt+/除了sysout能够提 ...
相关推荐
本工程采用ExtJs4.0 开发,采用mvc开发模式,分为controller view model store。
ExtJS4.0.7的MVC模式。 欢迎大家下载。
Extjs4新推出的MVC模式 研究了几天终于弄明白怎么回事了,写了个例子, 可以实现增删改查, 分步加载controller
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
ExtJS4.0项目教程(MVC)
这是一个mvc模式实现的ExtJS案例,非常适合新手了解ExtJS的mvc模式!代码中有详细的注释解析,为大家学习提供方便。
本实例采用Extjs4.0 开发,按照mvc模式分为,controller view model store
EXTJS学习,webform+mvc routeing extjs布局 适合初学者
ExtJS4官方指南:MVC架构简体中文版宣贯.pdf
Extjs4.0+MVC模式+存动态加载,动态加载面板,动态加载控制器,动态加载树叶子节点,后台servlet模拟json数据
ExtJs+ASP.net+MVC
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
ExtJs+ASP.NET MVC实例,案例中将ASP.NET MVC与ExtJs整合在一起,初学者可以参考
借鉴了下面github上的一个例子,这个例子非常简洁,原滋原味,几乎没有大改动官方文件,但是无法运行,我做了一定量的修改,使其能正常运行,并优化成我喜欢的MVC模式。 另外,贴上一个博客地址,关于ExtJS Desktop...
Extjs4 MVC小实例根据The MVC Application Architecture做的
一个ExtJs4.1.1版本MVC应用框架,不包含服务器端程序。
ExtJS4官方指南:MVC架构简体中文版归类.pdf
ExtJs 4 用了一段时间了,今天研究了下ExtJs4的MVC机制,感觉还挺好,建议大家尝试,所以就写了一个demo,帮助那些对ExtJs还不是很懂,或者想用ExtJs4却又不知道怎么做好的朋友。。。多余话不说了大家如果有什么不...
ExtJS4.0MVC学习,适合初学者。