项目开发中遇到的extjs常见问题
事件触发机制 l 给某一个控件添加事件。 obj.addEvents( {search : true }); l 给某一个事件添加处理函数 n 给一个对象或变量添加监听及对应得处理,可以在创建时,通过属性listener添加。 n 或者通过 obj.on(‘event’,function(){}) n 或者通过obj.addListener(“event”,function) l 出发一个事件,params是要传给事件对应的处理函数的参数 Obj.fireEvent(‘eventName’,params) 工具栏 获取工具栏元素方法 var items = this.preview.topToolbar.items; items.get('tab').enable(); items.get('win').enable(); Panel及子类 ViewPort Viewpor代表整个浏览器的显示区域,会被渲染到html body中,并会随着浏览器显示区域大小自动改变。 Window 1. 创建属性一般设置 { width : 500, height : 300, layout : 'fit', constrain : true, 把窗口的显示位置限制在viewport中 constrainHeader : true, items : this.form, plain : true, closeAction:’hide’ frame : true, modal : true, 窗口显示时,把窗口以外的元素用一个样式遮盖 buttonAlign : 'center' 按钮居中 } 2. Beforeclose事件 当窗口关闭以前可以做一些操作,如检查窗口内部表单数据的改变与否 winObj.on('beforeclose', this.checkDirty, this); 3. 按钮的获取 要获取window的按钮 winObj.buttons disableButton:function(){ for(i=0;i<this.buttons.length;i++) this.buttons[i].disable();//hide() }, enableButton:function(){ for(i=0;i<this.buttons.length;i++) this.buttons[i].enable()//show(); } MessageBox 1. 点击确认/取消后执行function Ext.MessageBox.alert/confirm ("信息",msg, function(button, text) { //当confirm时 判断按钮 if (button == "yes") //TODO something }, this); TabPanel 当页签改变的时候出一个处理函数 Ext.getCmp('tabpanel').on('tabchange',this.tabChange,this); 获取某一个页签,在页签中的给id 属性,通过id获取 Ext.getCmp('tabpanel').getItem('id'); gridPanel l gridPanel 中gridView是控制grid的展现,通过viewConfig用来配置属性,其中 autoFill : true,forceFit : true 比较重要 l 控制列菜单的显示与否 enableHdMenu:false l 对具有翻页功能的grid,当通过某一个参数获取store数据时,传输参数的方法必须是通过get方式,即在url后面追加或许通过baseParams传递。不能通过params传参。 l Store.reload 方法用于加载当前页的数据 store.load重新加载数据返回第一页。 l 点击翻页按钮时,会调用store.load方法,并传把start和limit封装作为参数传进去,因此如果对查询结果集进行翻页得时候,要把查询条件要写到baseParams或追加到url中,以使翻页后的数据也是符合查询条件的。 l 当store的加载路径变了,要通过以下方式设置新的url this.store.proxy =new Ext.data.HttpProxy( {url : newURL } ); FormPanel 数据加载和提交注意事项 l 数据加载时,首先要配置reader,并且从后台返回的数据符合解析器的结构,一般跟后台的封装有关。目前所有数据均已list 或 page 形式返回。 l form.load()方法,当数据加载成功或者失败的时候,都会调用reader解析结果json数据,因此json数据中必须有root(一般为result)指定的结果集。属性successProperty:"success" 用来指定form执行load 成功后要回掉的函数名,默认情况下没有指定。 l 数据加载或提交后,form将回掉success failure函数,submit 和load方法在回掉的处理稍微不同。 Success/failure: function(form, action) { var jsonData = Ext.util.JSON.decode(action.response.responseText); if (jsonData) //dosomething} } 检查是否有脏数据 formPanel.form. isDirty() 一些重要的事件 当表单提交或加载成功(失败)后,触发以下事件 form.form.on('actioncomplete', handler, this); form.form.on('actionfailed', handler, this); Combo控件 Combo控件通过store加载数据时会出现的问题 1. 当设emtyText时,如果没有选中选项则会把“请选择…”保存到数据库中 2. 当设readOnly:true 时,一旦选择了某一个选项,则会不到空值,即不选任何值 3. 但是当不只读时,用户又可以自己随便输入值,这时这些值没有对应得key值在数据库中 4. 输入“中”时,下拉框中出现以“中”打头的选项 5. 往数据库传送key而不传value ,即下拉框中显示“中国”,并选中时,提交表单传送“中国”对应得key值 而不是“中国” 下面为解决方法 { xtype : 'combo', name : 'clearingid', fieldLabel : '付款类型', hiddenName : 'clearingid', //隐藏字段,即往后台传输对应得字段,combo会把 valueField的值存到这个隐藏字段中 store : pay_type_store,// 所要显示的下拉列表的数据对象 valueField : "codeVal1", //store的值域 displayField : "codeName", //store显示域 “中国” anchor : '100%', emptyText : '请选择...', forceSelection : true, //强制只能选择列表中的值 ,解决3 mode : 'local', //从客户端加载数据 typeAhead : true, //解决4 listeners : { expand : function(combo) { combo.reset(); } } } 有两个trigger的控件 自定义这类控件的方法 NewTrigger=Ext.extend(Ext.form.TwinTriggerField, { initComponent : function() { NewAddTriggerField.superclass.initComponent.call(this); }, trigger1Class : 'x-form-add-trigger', //第一个trigger的样式 trigger2Class : 'x-form-list-trigger',//第二个trigger的样式 onTrigger1Click : function() { //处理函数}, onTrigger2Click function() {//处理函数 } //要重写这两个方法以便于后台交互,可以采用combo的处理机制 setValue : function(), getValue : function() } ); Radio控件 Radio控件的布局 1. 方法一: 先在form里add一个 new Ext.form.Radio({ fieldLabel : 'Radio', name : 'sex', boxLabel : 'boy', id : 'sex-boy', allowBlank : false, value : 'boy' }) 然后在当前form render()后添加下面代码 Ext.DomHelper.insertAfter(Ext.DomQuery.selectNode('label:contains(boy)'), { tag: 'input', id: 'sex-girl', type: 'radio', name: 'sex', 'class': 'x-form-radio x-form-field' }, false); Ext.DomHelper.insertAfter(Ext.get('sex-girl'), { tag: 'label', 'class': 'x-form-cb-label', 'for': 'sex2', html: 'girl' }, false); 2. 方法二: var radioPanel = new Ext.form.FormPanel({ labelWidth : 60, labelAlign : 'right', frame : true, maskDisabled : false, waitMsgTarget : true, autoScroll : true, bodyStyle : 'padding:5px 5px 5px', buttonAlign : 'center', width: 400, buttons : [ { text : 'save', scope : this, handler : save } ], items : [{ layout : 'column', defaults:{autoWidth:true}, items : [ { layout : 'form', items : [{ fieldLabel : '单选框', xtype : 'radio', name : '1', boxLabel : '-优惠卡支付', inputValue : '1', checked : true }] }, { xtype : 'radio', hideLabel : true, name : '1', boxLabel : '-优惠卡支付', inputValue : '2', checked : false }, { xtype : 'radio', hideLabel : true, name : '1', boxLabel : '-优惠卡支付', inputValue : '3', checked : false } ] } ] }); 隐藏fieldLabel的两种方法:hideLable:true和不给fieldLabel属性并设labelSeparator:'' Radio控件传输数据 往后台提交数据前,首先通过getGroupValue获取单选框的值,这时创建的radio必须有inputValue值。 var v = radioPanel.form.findField('1').getGroupValue(); radioPanel.form.findField('1').setValue(v); form.form.on('beforeaction', handler, this); Ext的一些常用函数 l Ext.getCmp(‘cmpid’) 获取某一个控件,首先必须指定控件的id l Ext.get(‘id’) 获取某一个dom控件,该方法在fireFox里不支持 该方法等同于document.get() l Ext.apply(config1,config2)把后config2的数据覆盖到config1中,并覆盖原有数据。 l Ext.applyIf(config1,config2)也是拷贝但是不覆盖原有数据。 IE7中formpanel串位问题 这个问题是由控件的布局引起。当formpanel加载完数据后,将重新局部。由于重新布局的时候采用的绝对位置,因此导致串位。解决方式重写 Element的mask方法。 Ext.override( Ext.Element, { mask: function( msg, msgCls ) { //元素overflow 和 position if(Ext.isIE7 && this.getStyle("position") == "static"){ this.setStyle("overflow", "auto"); this.setStyle("position", "relative"); } if(!this._mask){ this._mask = Ext.DomHelper.append(this.dom,{cls:"ext-el-mask"}, true); } this.addClass("x-masked"); this._mask.setDisplayed(true); if(typeof msg == 'string'){ if(!this._maskMsg){ this._maskMsg = Ext.DomHelper.append(this.dom, cls:"ext-el-mask-msg", cn:{tag:'div'}}, true); } var mm = this._maskMsg; mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg"; mm.dom.firstChild.innerHTML = msg; mm.setDisplayed(true); mm.center(this); } if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){ this._mask.setHeight(this.getHeight()); } return this._mask; } }); 转:http://blog.163.com/chenkaiemail_01/blog/static/25504598200911112819279
项目开发中遇到的extjs常见问题的更多相关文章
- 团队项目开发中,常见的版本控制有svn,git
团队项目开发中,常见的版本控制有svn,git
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
项目开发中的一些注意事项以及技巧总结 1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...
- Angular 项目开发中父子组件传参
在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...
- 《Maven在Java项目开发中的应用》论文笔记(十七)
标题:Maven在Java项目开发中的应用 一.基本信息 时间:2019 来源:山西农业大学 关键词:Maven:Java Web:仓库:开发人员:极限编程; 二.研究内容 1.Maven 基本原理概 ...
- 炼金术(1): 识别项目开发中的ProtoType、Demo、MVP
软件开发是很分裂的,只有不断使用原则和规律,才能带来质量. 只要不是玩具性质的项目,项目应该可以大概划分为0-1,1-10,10-100,100-1000四个种重要阶段.其中,0-1是原型验证性的:1 ...
- 项目开发中的git简单使用
原文地址: https://www.zhuyilong.fun/tech/the-blog-git.html 示例远程仓库地址: https://github.com/zhu-longge/gitWo ...
- MyBatis 项目开发中是基于 XML 还是注解?
只要你对 MyBatis 有所认识和了解,想必知道 MyBatis 有两种 SQL 语句映射模式,一种是基于注解,一种是基于XML. 基于 XML <mapper namespace=" ...
- Java项目开发中实现分页的三种方式一篇包会
前言 Java项目开发中经常要用到分页功能,现在普遍使用SpringBoot进行快速开发,而数据层主要整合SpringDataJPA和MyBatis两种框架,这两种框架都提供了相应的分页工具,使用 ...
- 项目开发中Maven的单向依赖-2022新项目
一.业务场景 工作多年,在真实的项目开发中经常会遇到将一个项目拆分成多个工程的情况,比如将一个真实的项目拆分成controller层,service层, dao层,common公共服务层等等.这样拆分 ...
随机推荐
- 使用label在winfrom中添加分割线
1.水平分隔线:GroupBox2. 水平,垂直分隔: Lable (AutoSize = false, BorderStyle= Fixed3D , 还要调整Size的大小 水平调整Height = ...
- GOICE项目初探
GOICE项目初探 在图像拼接方面,市面上能够找到的软件中,要数MS的ICE效果.鲁棒性最好,而且界面也很美观.应该说有很多值得学习的地方,虽然这个项目不开源,但是利用现有的资料,也可 ...
- hiho 第116周,最大流最小割定理,求最小割集S,T
小Hi:在上一周的Hiho一下中我们初步讲解了网络流的概念以及常规解法,小Ho你还记得内容么? 小Ho:我记得!网络流就是给定了一张图G=(V,E),以及源点s和汇点t.每一条边e(u,v)具有容量c ...
- Axure一点
自己的感受:非常的考脑,上课要集中120分精神. Axure(快速制作网页原型) 1:全局变量:a:在菜单栏中可以新建全局变量. b:控制全部网页. c:取到输入框的值,设置User的值等于输入框的值 ...
- lua中特殊用法
th> a=torch.zeros(,) [.0001s] th> a [torch.DoubleTensor of size 1x5] [.0001s] th> a[{,floor ...
- CodeForces 651A Joysticks 贪心
A. Joysticks time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- BZOJ 3159决战
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3159 题意:给出一棵树,(1)路径加一个值:(2)路径上的节点的值反转(只是值反转,不是节 ...
- CodeForces 483B Friends and Presents
Friends and Presents Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I ...
- jquery之wrap(),wrap(),unwrap()方法详解
[注]wrap():为每个匹配元素外面添加指定的HTML结构, wrapAll(): 为所有匹配元素(作为一个整体)外面添加一个指定的HTML结构 原文地址:http://www.365mini.co ...
- HQL语句大全(转载)
Hibernate配备了一种非常强大的查询语言,这种语言看上去很像SQL.但是不要被语法结构 上的相似所迷惑,HQL是非常有意识的被设计为完全面向对象的查询,它可以理解如继承.多态 和关联之类的概念. ...