extjs几个的问题总结

extjs几个的问题总结 事件触发机制

         给某一个控件添加事件。

obj.addEvents( {search : true });

         给某一个事件添加处理函数

         给一个对象或变量添加监听及对应得处理，可以在创建时，通过属性listener添加。

        或者通过 obj.on(‘event’,function(){})

         或者通过obj.addListener(“event”,function)



         出发一个事件，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;

    }

});