事件触发机制
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