Extjs简记

使用 getter和setter

使用config包裹起来

Ext.define('My.sample.Person', {
    config: {
        name: 'Mr. Unknown',
        age: 0,
        gender: 'Male'
    },

    constructor: function(config) {
        this.initConfig(config);

        return this;
    }

    // ...
})

//


var jacky = new My.sample.Person({
    name: "Jacky",
    age: 35
});

alert(jacky.getAge());      // alerts 35
alert(jacky.getGender());   // alerts "Male"

jacky.setName("Mr. Nguyen");
alert(jacky.getName());     // alerts "Mr. Nguyen"

xtype He alias

xtype

xtype为类定义了一个短名称，同时提供了一个延迟实例化的方式

alias

类名的短别名列表。 别名由命名空间和由句点连接的名称组成，如.

namespace - 命名空间描述了这是什么类型的别名，并且必须全部小写。

name - 允许通过别名进行延迟实例化的别名。 名称不应包含任何句点。

以下命名空间

feature - Ext.grid.Panel features
plugin - Plugins
store - Ext.data.Store
widget - Components
controller - Controller

模板方法

事件

• 创建的时候
• 点击的时候
• 销毁的时候

自定义事件

事件的绑定(on)(addLlistener)和解除绑定(un)(removeListener)

var destroy = myButton.on('click',onMyButtobClick,myButton){
    destroyable: true
}

button1 为button2 绑定事件

myButton.addManageListener(Mybutton,'click',onMyButtonClick,myButton)

多事件的处理

全部放在listeners即可

当使用on时如何实现多事件绑定？

myButton.on({
    scope: 'mypanel',
    click: onClick,
    mouseover: onMouseover
})

事件的拦截

Ext.util.Observable.capture(myButton,function(eventName){
    // 拦截到按钮所有事件
    return true/false
    // 对指定事件做指定处理
    if(eventName === 'mouseover') {
        return true
    }
})

释放某些元素的拦截事件

listeners: {
    click: function() {
        Ext.util.Observer.releaseCapture(mybutton)
    }
}

事件的传播

var panel = Ext.create('Ext.panel.Panel',{
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
})

var panel = Ext.create('Ext.panel.Panel',{
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
})
// panel不主动监听点击事件，通过“关注”到button的点击事件触发，事件的传播
panel.relayEvents(mybuttons,['click'])
panel.on('click',function() {
    alert('buttonClick')
})

如何自定义事件？

listeners: {
    click: function() {
        // 传递的第二个参数可以被接收到
        this.fireEvent('myEvent', 'my')
    },
    myEvent: function(name) {
        console.log("我被执行了！！！" + name)
    }
}

Ext.define('Person', {
    mixins: {
        observable: 'Ext.util.Obserbable'
    }
})

var person = Ext.create('Person', {
    listeners: {
        myEvent: {
            console.log("我被执行了！！！")
        }
    }
})

布局

• 绝对布局(absolute)

  距离左上角的点x和y的距离（也就是元素的左上角的x和

  y坐标）

• 可折叠布局 (accordion)

              items: [
                  {
                      xtype: 'panel',
                      layout: 'accordion',
                      items: [
                          { title: 'haha',text: "haha", html:'haha'},
                          { title: 'hwhw',text: "hwhw", html:'hwhw'}
                      ]
                  }

• 边界布局 （border）

                     layout: 'border',
                      defaults: {
                          border: false,
                          // header: false
                          // 可拖动的分割线
                          split: true
                      },
                      items: [
                          {xtype: 'panel',title: 'north',region: 'north',height: 100,html: '我是上间'},
                          {xtype: 'panel',title: 'center',region: 'center',layout: 'fit',html: 'haha'},
                          {xtype: 'panel',title: 'west',collapsible: true,region: 'west',width: 140,html: '我是左间'},
                      ]

• 卡片布局 (card)

  始终只有一个页面处于激活状态

  setActiveItem(card) 通过组件名称
  setActiveItem(card-2) 通过 itemId来激活
  setActiveItem(2) 通过索引激活

  getActiveItem()获取当前激活页面

  如何通过下一页和上一页实现翻页

  1. 获取当前布局对象
  2. 设置当前激活的页面为index所指
  3. 实现导航按钮的禁用和开启

this.getLayout()返回当前与此Container关联的Ext.layout.container.Container实例

id和getCmp(‘id‘)或者reference和this.lookupReference(‘pre‘)来实现查找元素

//实现禁用

me.lookupReference('pre').setDisabled(me.active === 0)
me.lookupReference('next').setDisabled(me.active === (me.items.length - 1))

官方实例

var navigate = function(panel,direction) {
    var layout = panel.getLayout()
    //  获得当前layout，layout 上有方法可以切换当前页
    layout[direction]()
    // layout.getPrev() 返回值是上一个card组件
    // 这里的作用就是判断是否还有上一个如果有就不禁止，当没有后就设置按钮进制使用
    Ext.getCmp('prev-a').setDisabled(!layout.getPrev())
    Ext.getCmp('next-a').setDisabled(!layout.getNext())
}

Ext.define('extTest.view.test.card', {
    extend: 'Ext.panel.Panel',
    xtype: 'cCard',
    layout: 'card',
    width: 400,
    height: 400,
    items: [
        {title: 'one',html: 'one page'},
        {title: 'two',html: 'two page'},
        {title: 'three',html: 'three page'}
    ],
    bbar: [
        {xtype: 'button',text: 'prev',id: 'prev-a',handler: function(btn) {navigate(btn.up('panel'),'prev')}},
        '->',
        {xtype: 'button', text: 'next', id: 'next-a',handler: function(btn) {navigate(btn.up('panel'),'next')}}
    ]
})

列式布局

column

注意columnWidth值是1以内的数字，代表占比

vbox和hbox

锚点布局

form布局

Ext.Msg.confirm

Ext.Msg.confirm(title,content,确定后的执行内容(可以是函数)，this)

treepanel实现树

xxx function() {
    var me = this 
    // getViewModel先获取到ViewModel对象然后从中获取自己需要的值
    var menu = this.getViewModel..get('xxx')
}

Extjs简记

原文：https://www.cnblogs.com/daixixi/p/11306038.html