Extjs基本业务处理事件之MVC

限时加码!20+主流AI编程工具免费用 购周边加赠Coding Plan Lite,Claude Code、Cursor等即刻畅享,学习进阶更高效! 阅读详情

1、store中参数的查询方式分为2种:

    filter:

   baseParam:

     grid.store.on('beforeload',function(store,options){
var new_params={
userid:id,
seachtime:search
};

                       //将参数集合拷贝到proxy中(代理请求)。
Ext.apply(grid.store.proxy.extraParams,new_params);
});

//返回第一页
grid.store.loadPage(1);

2)直接传递ID的方式:

ugrid.store.proxy.url='departUserList.action?departid='+id;
ugrid.store.load({
params:
{
start:0,
limit:10
}
});;

2、MVC中获取控件ID的值

在Controller中获取控件的方式,写法有两种。第一种:
this.control(
{
'RecordUserList button#query':{
click:this.queryClickListener
},

第二种:

如果是button的话,则

this.control(
{
'RecordUserList button
[id="query"]':{
click:this.queryClickListener
}

}

3、自定义控件:

Ext.define('Login.view.CheckCode',{ 
extend: 'Ext.form.field.Text',  
alias: 'widget.checkcode', 
inputTyle:'codefield', 
codeUrl:Ext.BLANK_IMAGE_URL, 
isLoader:true, 
onRender:function(ct,position){ 
this.callParent(arguments); 
this.codeEl = ct.createChild({ tag: 'img', src:'validationCode' }); 
this.codeEl.addCls('x-form-code'); 
this.codeEl.on('click', this.loadCodeImg, this);   
if (this.isLoader) this.loadCodeImg(); 
}, 
alignErrorIcon: function() { 
this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]); 
}, 

loadCodeImg: function() { 
this.codeEl.set({ src: 'validationCode' + '?temp=' + new Date().getMilliseconds() });



}) 

4、数据更新(Form表单回填)

1)panel面板回填:

Ext.getCmp('RecordInfoTitleContent').update('<div>'+menusArray.content+'</div>');

2)form表单回填:

store.each(function(record){
// formPanel.down('form').loadRecord(record);
// });

1)如上所示,该方式是采用store的回填方式

2)加载远程数据回填:

/**
* var basice= formPanel.down('form').getForm();
* basice.load({
*  //类似ajax的请求表单事件的写法
* );
*/

3)Ext.getCmp('').setValue();

5、获取gridpanel中的数据项

var grid = o.findParentByType('gridpanel');
//获取store
//grid.getStore.getCount();
//另外一种方式:
//var data = grid.getSelectionModel().getSelection();
//取出选中的ID
//var st = grid.getStore();
//var ids=[];
//Ext.Array.each(data,function(record)){
//  ids.push(record.get('userid'));
//}
//将数组发到后台
//Ext.Ajax.request({
//url:'',
//params:{
//ids:ids.join("_");

}

6、表单提交:

var loginForm = Ext.getCmp('LoginUserFirmID');
if (loginForm.getForm().isValid) {
loginForm.form.doAction('submit', {
url : 'login.action',
method : 'post',
waitTitle : '请等待',
waitMsg : '正在加载',
success : function(form, action) {
Ext.Msg.alert('登入成功', action.result.message);
window.location="result.action";
},
failure : function(form, action) {
Ext.Msg.alert('登入失败', action.result.message);
}
});
}

7、获取控件

1)采用Ext.widget,如下所示:

Ext.widget('ResourceAdd',{
}).show();

2)采用控件ID的方式:

var grid = Ext.getCmp('ResourceList');

grid.getValue();

8、使用TreeStore加载

Ext.define('WorkDate.store.FunctionStore',{
extend:'Ext.data.TreeStore',
requires:'WorkDate.model.TreeModel',
model:'WorkDate.model.TreeModel',
alias:'widget.FunctionStore', 
proxy:{
type:'ajax',
url:'tree.action',
reader:'json',
autoLoad:true
}
});

形成树形的方式有:异步加载和一次性加载,如果采用一次性加载的方式,如下所示:

/**
 * @see 生成资源树
 * @author root
 *
 */
public class LoginResourceTree {
/**
* @see 根据当前角色取出资源菜单列表
* @param roleid
*/
public static String toTree(int roleid){
StringBuffer str = new StringBuffer();
Gson gson = new Gson();
List<TreeNode> treeNode = new ArrayList<TreeNode>();
List<Purview> list = new ArrayList<Purview>();
try {
Session session=HibernateUtils.getSession();
String sql= "from  Purview  pv where  pv.resource.rePid=? AND pv.role.RId=? AND pv.resource.State =1";
Query query=session.createQuery(sql);
query.setParameter(0, 0);
query.setParameter(1, roleid);
list=query.list();
if(list.size() >0){
for(Purview res:list){
TreeNode tree =new TreeNode();
tree.setId(String.valueOf(res.getResource().getReId()));
tree.setPid(String.valueOf(res.getResource().getRePid()));
tree.setText(res.getResource().getReName());
tree.setUrl(res.getResource().getRePath());
List result=toChildTree(res.getResource().getReId());
if(result != null){
tree.setChildren(result);
tree.setLeaf(false);
}else{
tree.setLeaf(true);
}
tree.setIcon(StringUtils.resultNull(res.getResource().getReIcon()));
treeNode.add(tree);
}


str.append(gson.toJson(treeNode));
}
System.out.println("list.size()="+str.toString());
} catch (RuntimeException e) {
e.printStackTrace();
HibernateUtils.closeSession();
System.err.println("LoginModule queryDepart error:"+e.getMessage());
}
return str.toString();
}
/**
* @see 生成子节点
* @param reid
* @return
*/
public static List toChildTree(int reid){
Gson gson = new Gson();
List<TreeNode> treeNode = new ArrayList<TreeNode>();
List<Resource> list = new ArrayList<Resource>();
try {
Session session=HibernateUtils.getSession();
String sql= "from  Resource res  where  res.rePid in (?)  AND res.State =1 ";
Query query=session.createQuery(sql);
query.setParameter(0, reid);
list=query.list();
if(list.size() > 0){
for(Resource res:list){
TreeNode tree =new TreeNode();
tree.setId(String.valueOf(res.getReId()));
tree.setPid(String.valueOf(res.getRePid()));
tree.setText(res.getReName());
tree.setUrl(res.getRePath());
List result=toChildTree(res.getReId());
if(result != null){
tree.setLeaf(false);
tree.setChildren(result);
}else{
tree.setLeaf(true);
}
tree.setIcon(StringUtils.resultNull(res.getReIcon()));
treeNode.add(tree);
}
}else{
treeNode=null;
}
} catch (RuntimeException e) {
e.printStackTrace();
HibernateUtils.closeSession();
System.err.println("LoginModule queryDepart error:"+e.getMessage());
}finally{
HibernateUtils.closeSession();
}
return treeNode;
}

ExtJS学习:MVC模式案例(三) ExtJS案例系列教程的前两讲,我们了解了该案例的最终实现效果,并且在ExtJS学习:MVC模式案例(二)中我们添加Viewport.js和demoController.js两个文件,实现了对整个网页的基本布局。这一讲使我们系列教程的第三讲,主要实现网页左侧的树形菜单部分,希望对入门级的WEB开发者提供一个引导的作用。 接下来,我们在view文件夹中添加一个mentTree.js文件,用来作为... 阅读详情

相关推荐

使用extjsmvc架构开发简单的站点

首先弄清楚extjs和ejs的区别在哪? ejs只是一个javascript的模版库(模版引擎),用于从json数据中生成HTML字符串;而extjs则是一个使用javascript编写的,前端ajax框架。 ExtjsMVC,其中model,store为数据层,controller为控制层,也是聚合器,grid、tree为视图层(view),.官方的意思就是要把将数据层、视图层在con

baidu20008的专栏 1165

Extjs4 controller获取组件

Extjs4 mvc模式中的controller是用来控制view和store的,可以用于各个view之间的关联,怎么从view里取出想要的组件,方法如下: 1、 通过组件ID获取组件:"#组件ID”;如:'panel #id' 2、 得到某一组件下所有的指定类型的组件:"panel>button”,这种方式是查找所有panel组件下的所有button组件。 3、 通过xtype:treep

日光倾城 4054

Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护;这就是Extjs MVC开发模式的初衷。 在官方给

luckypeng的专栏 6107

EXTJS4之MVC架构

目前我们在构建我的应用程序时,采用的架构也有好多,其中我们最常用的也是最基础就是Model-View-Control(MVC),不管我们在构建什么类型的应用程序,我们都离不开MVC的设计。在EXTJS4中,也提供的MVC的设计思想,下面我们就来看一下,在EXTJS4中如何应用MVC的架构。 1、首先我们先简单介绍一下,4中MVC各层的基本概念。 Model:Model层,说白了,具...

zhenyaoMilenfan的专栏 238

ExtJS4的MVC模式实例

MVC模式, 想必大家都很清楚。  Model  -  View - ControllerExtJS在4.0以后也开始引入了MVC模式, 程序的结构也就变得规范。 开发者可以利用MVC的设计模式规划了开发流程。 下面的一个MVC模式的小例子。 在demo文件夹里就是ExtJSMVC架构。 先来看界面。 dem

奋斗吧。 4403

ExtJS 4 MVC架构讲解 – ExtJS4中文教程(转)

Posted on 2012/07/02 by ishowshao — 7 Comments ↓ &lt;!-- .entry-meta --&gt;&lt;!-- .entry-header --&gt; ExtJS MVC架构讲解 本文地址 http://www.showframework.com/2012/07/extjs-mvc-architecture...

jyqc688的专栏 304

ExtJS MVC框架搭建(一)

一、ExtJS MVC框架目录结构介绍 1)创建如下目录结构 webapp app controller model store view css (用于存放自定义的CSS文件) dat...

踏 浪的博客 1038

透彻阐述 ExtJS 4 的MVC【有图有真相】

ExtJS是我听说了很久的一个js框架了,但是从来就没有用过,读研期间寝室里有个小哥在用,不过那时候醉心于WordPress开发,也懒得理会了。现在公司里,有个上线系统用到了这个框架中的一个TreePanel组件,整个界面上,就正中间扔了一个tree panel,而且不知道什么原因,CSS还有bug,把按钮都搞破了,弄得丑陋不堪,我于是自告奋勇,仔细调试,终于修复了那个显示上的bug,从此算是初次

闲云野鹤 的专栏 1470

最简单的ExtJS4的MVC实例

ExtJS4.0开始,ExtJS支持MVC架构,让前端开发者更好的实现数据与逻辑分离,使用 View, Controller, Model组件定义来完成浏览器前端业务。提高代码可以维护性。ExtJS中 的View是被动模式,被Controller持有。 一个最简单的基于ExtJS4的MVC的App实例,有Contoller, View, Model,Store等组成 其目

沉底的石头 1606

ExtJS4.2学习(9)——MVC

对于Extjs来说,大客户端程序一直很难写,当你为大客户端程序添加更多的功能和项目的时候,项目的体积往往迅速增长。这样的大客户端程序很难组织和维持 ,所以,Extjs4配备了一个新的应用程序体系结构,它能结构化你的代码。 Extjs4有别于其他MVC架构,Extjs有他自己定义: 1、Model是一个Field以及他的Data的集合,Modes知道如何通过Stores来表示数据,以能用于网格和

低调的草原狼 2959

ExtJs4 MVC模式下绑定Menu事件

View层代码: Ext.define('My.view.Menu', { extend: 'Ext.menu.Menu', alias: 'widget.mainMenu', items: [{ text: '主菜单', hideOnClick: false, menu: { showSepar

tianxing0923的专栏 6143

Extjs mvc

MVC的模式,模型(Models)和控制器(Controllers) Model模型是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的...

QDY5945的博客 203

Extjs4.0 MVC实例

extjs mvc 架构 ,有别于其他的MVC架构,EXTJS 有自己的定义 Model : 一个field 以及 他的data的集合。 Modles 知道如何持久化自己一般使用Stores 来表示数据以用于grids等component View: 一种component的类型,grids,trees 以及panels等 Controller:用来放使得app工作的代码,例如 render

hanqing 3965

Spring MVCExtJS完美集成

一、简介 本demon主要是集成了SpringMVCExtJS,同时还支持controller页面配置、页面消息可配置(类似于国际化)、intercepter示例。 二、系统集成 1、包文件 包文件的重要性就不多说了,建议用maven管理。 但是,为了加深理解,我是直接从官网上下载的包,然后一个个试的,中间遇到了很多问题,包括少包,包冲突等。 2、配置文件

秦超的学习笔记 8369

ExtJS MVC 案例实践(一)

参考自:https://blog.csdn.net/luckypeng/article/details/43151793 介绍: 使用ExtJS MVC构建出如下图框架。 ps: 此实验是接着"ExtJS MVC框架搭建(三)" 教程后面做的, 所以主页为 index2.html, JS文件为 app2.js 一、自定义一个viewport组件 新建 app/view/Viewp...

踏 浪的博客 754
上一篇: COCOS2D-X源码分析之初始化游戏
下一篇: PHP入门案例之获取服务器状态
jecon
博客等级 码龄15年 10粉丝 34原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值