EXt js 学习笔记总结

1. get 、 fly、 getCmp
、getBody 、getDoc 、getDom、、

   get-----ExtJs获取节点、dom、提供缓存机制  Ext.Element类是Ext对DOM的封装 get是Ext.Element.get的简写

   fly-----

   getCmp----用来获得一个Ext组件，已经在页面中初始化了的Component或其子类的对象，getCmp方法其实是Ext.ComponentMgr.get方法的简写

   ...

2. Ext.extend 继承

LoginWindow=Ext.extend(Ext.Window,{

   initComponent : function(){

        LoginWindow.superclass.initComponent.call(this);

   }

});

LoginForm=Ext.extend(Ext.form.FormPanel,{

   constructor:function(_cfg){

   if(_cfg==null){ _cfg={}; }

   Ext.apply(this, _cfg);

   LoginForm.superclass.constructor.call(this, {    ....   });

 });

3. ExtJs事件模型

        Ext.util.Observable   事件抽象基类

        Ext.EventObject       处理按键

        Ext.EventManager

        Ext.lib.Event

4.Panel面板    mixed
混合型

     1..tools[ {  },{}.... ]   标题栏添加按钮

     2..面板 显示/隐藏  show() / hide()

     3..面板的拖拽---------------------------------

          

          draggable: {

                insertProxy: false,

               

                onDrag : function(e){

                    var pel = this.proxy.getEl();

                  

                    this.x = pel.getX();

                    this.y = pel.getY();

                   

                    var s = this.panel.getEl().shadow;

                    if (s) {

                        s.realign(this.x, this.y, pel.getWidth(),
pel.getHeight());

                    }

                },

               

                endDrag : function(e){

                   

                    this.panel.setPosition(this.x, this.y);

                }

            },

5..tabPanel 标签面板

     1...动态创建 标签面板

     2...关闭标签面板

     var tab = tabPanel.getComponent(o);

     tabPanel.remove(tab);

     if(p.closable)  closeTab(p);

     3..标签面板 注册右键菜单

6...Ext.Window

    modal:true,最好配置下  shadow: true ，解决 窗口 跟 阴影 同步变化

-------------------------------------

7..Ext.grid 表格

     高级store：

simpleStore
= Store + MemoryProxy + ArrayReader

     JsonStore  =  Store + HttpProxy + JsonReader

     Ext.data.GroupingStore对数据进行分组

ColumnModel([{},{}...])  是一个数组

header      显示文本

      dataIndex   记录集字段

      sortable    排序

      renderer    列渲染方法

      width       宽

      format      格式化

修改某一行样式：grid.getView().addRowClass(r, css) 或 grid.getView().getRow(r).style.backgroundColor='red'

     修改某一行的单元格样式：grid.getView().getCell(r,c).addRowClass(css)

     获得某一行数据：store.getAt(1)

     刷新:grid.view.refresh()

     获取某一行字段：grid.getStore().getAt(i).get('username')

1...grid列宽问题：

   如果GridPanel 配置viewConfig: {forceFit:true}, 则 ColumnModel按照
width比例分配宽度

      var cm = new Ext.grid.ColumnModel([{
header:'编号',   dataIndex:'id' ,width:3}]);

   var grid = new Ext.grid.GridPanel({ viewConfig: {forceFit:true}});

   

 可以指定 每列的宽度数值，若同时指定了 viewConfig {forceFit:true}   则指定的数值无效，grid会根据这些数值计算出比例，对各列分配宽度。

 autoExpandColumn 只能指定一列的 id ，则该列渲染时会自动延伸，撑起表格、

2...grid 列时间处理

     推荐返回 java 的 getTime 整数 ，在 js renderer : 用 Date 格式出字符串

3...grid 单元格格式化

     指定列元数据的 renderer 函数 ，返回 带格式的 html

4...grid 行设定颜色

     指定 viewConfig.getRowClass 返回相应的的行css

5.自动显示行号

     列元数据的第一个数据填充 new Ext.grid.RowNumber() ,会自动计数 ,计数中断后，可以用 gridView.refresh()重新计数。

6...grid 后台排序

     设置 store.remoteSort = true ,会向后台提交两个参数 sort , dir

7...editorgrid

     store.modified 所有修改过的记录 ,commit()
会去除 单元绿色标记

8...groupgrid

      groupstore 关键要设置 groupField

 9.表格右键实现要点

     监控 contextmenu 事件，自己构造 menu组件
，弹出在鼠标位置

 10 ...formpanel layout

       只能是 form ，不能改 ,formpanel
只负责布局 ，核心部分由 form成员 处理

 11...anchor

      用来指定 输入组件 和 formpanel 的相对宽度 高度。

 12...submit

        默认 ajax 提交 ，传统方式 要 获得 dom节点 ，调用 传统submit()

 13...使用后台校验

       关键是 设置 返回 json sucess:false ,errors:{输入组件名：该组件的错误}

 14...嵌入其他html

      可以设置 xtype:'panel',html: 随便

 15...comboBox hiddenName

      真正value存放的位置，涉及提交，建议设置

      getValue 返回真正value

      getRawValue 返回显示的text

 16...comboBox  triggerAction

      防止重新选择 显示不全 ，建议设成 'all'

 17...comboBox radio

       区别主要在于 radio 多个要设同一个 name

 18...树的后台生成数据

      设 treeloader 的同时 要设置 AsyncTreeNode ,后台会收到 当前树节点的 id

 19...expand

      root.expand() 只会扩展一层 expand(true) 则全部扩展了

 20...节点的默认图片

      icon : 图片地址  优先级高

      iconCls :图片css

 21...节点提示信息

     设置 qtip

 22...节点的界面修改部分

     用tree.ui 来修改 ，mvc分层了

8...Ext.grid.GroupingGrid

   var store = new Ext.data.GroupingStore({

       autoLoad : true,

       groupField:'department',

       sortInfo:{field:'id',direction:'ASC'}, 

       proxy:  new Ext.data.MemoryProxy(datas),

       reader: new Ext.data.ArrayReader({idIndex: 0},[ {name:'id'}]

   });

grid = new Ext.grid.GridPanel({ view : new Ext.grid.GroupingView(),... });

======================

= extjs 常用布局

======================

1.. FitLayout

-------------

FitLayout：自动适应布局,只能使用一个子组件,无法胜任复杂布局；

注意：子组件 使用autoHeight 会使Fitlayout失效

1.. BorderLayout

----------------

边框布局：分5个区域-东 西 南 北 中，中是不能省略的;

在某一区域添加 split:true,左右,上下拖放，而中不会变化;

collapsible:true激活折叠功能

问题：如何在 西区域 的标题栏 添加额外的功能呢？在折叠位置再添加一些按钮？

--------------------------------------------------

使用 extjs 模板创建 dom：

   var bd = Ext.getDom('checkCode');

   var bd2 = Ext.get(bd.parentNode);

   bd2.createChild([{tag:'span',html:'   '},{tag: 'img',id:'randImage',onclick:'loadimage()',
src: '/demos/WindowDemo/image.jsp',align:'absbottom'}]);

-----------------

checkbox

boxLabel : String   ==The text that appears beside the checkbox

inputValue : String

////////////////////////////////////////////////////

//applyTo是直接使用指定元素来生成组件

  //renderTo是在指定容器内部生成组件（该元素被用作容器）

// Ext.QuickTips.init();

  // Ext.form.Field.prototype.msgTarget
= 'side';

  // qtip  当鼠标移动到控件上面时显示提示

  // title  在浏览器的标题显示，但是测试结果是和qtip一样的

  // under  在控件的底下显示错误提示

  // side  在控件右边显示一个错误图标，鼠标指向图标时显示错误提示

  // [element id] 错误提示显示在指定id的HTML元件中

//表单验证 extjs默认几种

alpha  只输入英文字母

alphanum  只能输入字母 和 数字

email    电子邮件

url      网址

-----------------------------

{

    id:'userName',

    name : 'userName',

    fieldLabel : '帐号',

    vtype:"email",  //email格式验证

    vtypeText:"不是有效的邮箱地址",//错误提示信息

    blankText : '帐号不能为空'

}

------------------------------

minValue 和 maxValue  输入数字范围

allowDecimals  不能输入小数点

allowNegative  不能输入负数

=====

regex:/^\d$/, //正则表达式　这里假设只允许输入数字　如果输入的不是数字　就会出现下面定义的提示信息

  regexText:"regexText：只能够输入数字", //定义不符合正则表达式的提示信息

  validateOnBlur:true,//默认是true,失去焦点时验证

   validationDelay:300,//默认是250,验证延迟时间,毫秒数

 validationEvent:"click", //验证事件　默认是keyup　可以是String/Boolean

//自定义的验证函数　当输入的数据不符合正则表达式的要求时，就会执行这个函数

  validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");},

=====

# new Ext.form.NumberField({

#     style:'direction:rtl'//这样就可以让输入框的光标定位在右边了.这就是你要的效果:)

# });

//正则表达式验证在EXTJS中的应用

regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,

regexText: '格式应由汉字、数字、字母或下划线组成.'

文本框

maxLength: 5, //验证最大输入字符数

maxLengthText: "长度不多于5个字符!",

// minLength:
2,  //验证最小输入字符数

// minLengthText: "评论人长度不少于2个字符!",

-------------------------------

使用正则表达式验证

regex : /[\u4e00-\u9fa5]/,   //正则表达式 [\u4e00-\u9fa5] : 只能输入中文

高级自定义密码验证：

//先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）

Ext.apply(Ext.form.VTypes,{

    //val指这里的文本框值，field指这个文本框组件

    //confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值

    password:function(val,field){

      if(field.confirmTo){

          //取得confirmTo的那个id的值

          var pwd=Ext.get(field.confirmTo);

          return (val==pwd.getValue());

      }

      return true;

    }

});

------------

items:[{

    fieldLabel:"密码",

    id:"pass1",

     },{

    fieldLabel:"确认密码",

    id:"pass2",

    vtype:"password",//自定义的验证类型

    vtypeText:"两次密码不一致！",

    confirmTo:"pass1",//要比较的另外一个的组件的id

}

-------------------------------------------------------------------

  draggable:true, 是否允许拖动

  constrain:true, 限制窗口的整体

  constrainHeader:true, 窗口的顶部不能超越浏览器边界

  plain: true,  //渲染窗口的背景颜色

  resizable:false,   //鼠标是否可以任意拖动窗口的大小

  border:true ,      //窗口内的边框

  minimizable:true,  //是否有最小化
按钮

  maximizable:true,  //是否有max
按钮

  loadMask:"正在加载......",

  closable:true,     //是否有close 按钮

  closeAction:'close', //点击关闭 触法closeAction  hide:是将window隐藏，

  "close"，关闭window就将它从内存中撤销

Ext.window的closeAction有两种选择close/hide（完全关闭/隐藏）

close就是把此window destroy (默认) 如果使用默认，点击关闭窗口就把窗口对象销毁

这样就不能使用show()

closeAction:'hide'

5．如果需要定义控件有两种方法（以gridPanel为例子）

A：new Ext.grid.GridPanel({

})

B:{

       xtype:’gridpanel’,

}

使用new 的方式是立即创建组件 而使用xtype则是延迟创建 这样的好处是当需要渲染此组件时才创建

类似hibernate的延迟加载 都是为了提高效率！

6．在JS中把JSON字符串转为对象，Ext.decode ( )

   在JS中把对象转为JSON字符串，Ext.encode ( )

7．可以在容器组件中把hideLabels设置为true，这样将不会显示容器中字段的标签了

8.年龄随着出生日期改变

{

    xtype:"datefield",

    format:"Y-m-d",      //格式化日期，默认：'m/d/Y'

    value:"1981-10-15",

    readOnly:true,       //设为只读

    fieldLabel:"出生日期",

    listeners:{

        "blur":function(_df){  //监听失去焦点事件，年龄随着出生日期改变

            var _age = _df.ownerCt.findByType("textfield")[1];

            _age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1);

        }

    }

}

-----------------------------------------------

第一种handler：

//document.body == Ext.getBody().dom

Ext.onReady(function(){

    new Ext.Button({

        renderTo:Ext.getBody(),//属性renderTo：将当前对象所生成的HTML对象存放到指定的对象中

        text:"确 定",

        handler:function(){    //函数handler：指定一个函数句柄，默认触发click事件

            Ext.Msg.alert("提示","欢迎学习ExtJS。");

//            alert("欢迎学习ExtJS。");

        }

    });

});

第二种listeners：

Ext.onReady(function(){

    new Ext.Button({

        renderTo:Ext.getBody(),

        text:"确 定",

        listeners:{  //函数listeners：在对象初始化之前就将一系列事件进行定义

            "click":function(){

                Ext.Msg.alert("提示","欢迎学习ExtJS。");

            }

        }

    });

});

第三种on：

Ext.onReady(function(){

    var _btn = new Ext.Button({

        renderTo:Ext.getBody(),

        text:"确 定"

    });

    _btn.on("click",function(){

        Ext.Msg.alert("提示","欢迎学习ExtJS。");

    });

});

====================================================

《》从gridpanel中获取一行数据填充到表单中

grid.on('click', function(){

  var selections = grid.getSelectionModel().getSelections();

    for(var i = 0;i <selections.length ; i++){

       var record = selections[i];

         formPanel.getForm().loadRecord(record);

         winP.show();

       }}

});