ExtJs中的双向绑定

Bind Descriptors 绑定描述符

官方定义：“绑定描述符”是一个描述所需数据的值(字符串、对象或数组)。ViewModel中的任何数据都可以用绑定描述符来描述。

 

Textual Bind Descriptors 文本描述符

类似vue中的模板语法

Two-Way Descriptors 双向描述符

可实现vue中watch类似的效果

# 连接vm中s，当s发生变化时打印s
var binding = viewModel.bind('{s}', function(s) { console.log('s=' + s); });

# 设置vm中s的值为'abc'  相当于viewModel.setValue('s', 'abc')
binding.setValue('abc');

常用**

Ext.Component几乎是所有组件的父组件，都拥有该配置项 bind 类似vue中的v-model

bind: 值为string时表示绑定在组件的 defaultBindProperty 指定的属性上 一般为value

# 创建一个组件，包含一个子组件textfield，textfield的值绑定viewModel中的's'
Ext.widget({
   items: [{
       xtype: 'textfield',
       bind: '{s}'  // a two-way / direct bind descriptor
   }]
});

Object and Array Descriptors / Multi-Bind 对象和数组描述符 / 多绑定

// 定义viewModel
viewModel: {
  data: {
    user: {
      name: '张三',
      phone: {
          brand: '华为',
          model: 'mate 60 Pro',
          slogan: '遥遥领先'  
      }
    }
  }

}

// 使用 对象
viewModel.bind({
  userName: '{user.name}',
  phoneInfo: {
    name: '{user.phone.brand} {user.phone.model}',
    slogan: '{user.phone.slogan}'
  }
}, function(val){
  // callback
  /** val: {
    userName: '张三',
    phoneInfo: {
      name: '华为 mate60 Pro',
      slogan: '遥遥领先'
    }
  }**/
})

// 使用 数组
viewModel.bind(['{user.name}','{user.phone}'], function(val){
  // callback
  /** val: ['张三', {
      brand: '华为',
      model: 'mate 60 Pro',
      slogan: '遥遥领先'  
    }]**/
})

个例

当 bind() 第一个参数为对象时，且有'bindTo'属性时

bindTo 的值为实际描述符， 且对象内可设置option配置项 (option 取决于binding 的类型)

 viewModel.bind({
     bindTo: '{x}',
     single: true
 },
 function (x) {
     console.log('x: ' + x); // only called once
 });

viewModel

data

该对象保存填充ViewModel的任意数据，然后可用于绑定。

viewModel: {
  data: {
    title: '标题',
    user: {
      name: '张三',
      age: 22
    },
    array: [1,2,3]
  }
}

stores

Ext.data.Store配置的声明，首先作为绑定处理以产生有效的存储配置。

viewModel: {
  stores: {
    // type 创建方式
    gridStore: {
      type: 'xxxStore',
      autoLoad: true
    },
    
    // Ext.create() 创建方式
    treeStore: Ext.create('Xxx.xxx.XxxStore', {autoLoad: true})
  }
}

formulas

类似vue中的计算属性computed ，特点也差不多，有缓存，可以是对象（get + set）/ 函数(get)

viewModel: {

  data: {
    firstName: '张',
    lastName: '三'
  },
  
  formulas: {
    // 第一个参数为get函数, 可以获取viewModel中的值
    fullName: function(get) {
      // 返回值为 fullName 的值
      return get('firstName') + '-' + get('lastName');
    },

    // 以上方式只能取fullName的值

    // 配置为对象
    fullName2: {

      // 如果公式只需要生成初始值，则可以将其标记为single。
    	// single: true

      // 可显示指定需要监视的值, 替换get方法中的参数get
      // bind: {firstName: '{firstName}', lastName: '{lastName}'}
      // get: function(val) {
      //		let {firstName, lastName} = val;
      //		......
      // }
      
      get: function(get){
        // 返回值为 fullName 的值
      	return get('firstName') + '-' + get('lastName');
      },
      
      set: function(newVal, oldVal){
        // this 指向 viewModel实例
        let array = newVal.split('-');
        this.set({
          firstName: array[0],
  				lastName: array[1]
        })
      }
      
    }
    
  }
  
}

viewController

与viewModel一样是component的配置项， 且可管理对应组件及其子组件

简单使用：

Ext.define('MyView', {
    extend: 'Ext.Panel',
    controller: {
      
      onAddClick(btn, event) {
        Ext.Msg.alert('Add', 'The Add button was clicked');
        // 该方法中this指向btn对象
      },

      control: {
        'button': {
          click: function(btn, event){
            // 该方法中this指向controller对象
          }
        }
      }
      
    },

    items: [
      {
        xtype: 'button',
        text: 'Add',
        handler: 'onAddClick',  // calls controller's onAddClick method
    	}
    ]
});

viewController中提供了以下四个方法应对视图的关键点任务：

beforeInit：在视图的 initComponent 之前执行

init: 在视图的 initComponent 之后执行

initViewModel: 在视图模型创建之后执行

destory: 销毁时执行， 通常跟随视图的销毁而销毁