Ext.js5下拉框—简单下拉框（publishes）（26）

view

/**
 * This example illustrates a combo box which loads data from a local array.
 * 这个例子模拟了加载本地数据的下拉选择框
 */
Ext.define('KitchenSink.view.form.combobox.Simple', {
    extend: 'Ext.form.Panel',
    xtype: 'simple-combo',


    title: 'Simple ComboBox',
    width: 500,
    layout: 'form',
    viewModel: {},

    items: [{
        xtype: 'fieldset',
        layout: 'anchor',
        items: [{
            xtype: 'component',
            anchor: '100%',
            html: [
                '<h3>Locally loaded data</h3>',
                '<p>This ComboBox uses local data from a JS array</p>'
            ]
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Selected State',
            bind: '{states.value}'
        }, {
            xtype: 'combobox',
            reference: 'states',//使用reference决定数据对象的名字以放置在视图模型中
            publishes: 'value',
            fieldLabel: 'Select State',
            displayField: 'state',
            anchor: '-15',
            store: {
                type: 'states'
            },
            //用户必须自动完成输入之前且typeAhead激活的字符最小数目,默认queryMode = 'remote'时是4，或queryMode = 'local'时是0， editable = false时不适用。
            minChars: 0,
            queryMode: 'local',
            typeAhead: true
        }]
    }]
});

publishes 来自5API文档
publishes:String/String[]/Object
一个或者多个这个组件的配置属性需要传达给视图模型。一般来说，只有在类配置块（包括祖先设置块和混合类）定义的属性有资格被传达给视图模型。而一些组件不是这样的，他们默认将最有用的配置传达给视图模型。
注意：我们讨论得是不是在配置块下的publish属性。
配置中使用reference决定数据对象的名字以放置在视图模型中。如果reference没有被设置，那么这个配置就被忽略了。
通过使用这个配置和reference,可以绑定两个组件的配置。例如：

...
     items: [{
         xtype: 'textfield',
         reference: 'somefield',  // component's name in the ViewModel
         publishes: 'value' // value is not published by default
     },{
         ...
     },{
         xtype: 'displayfield',
         bind: 'You have entered "{somefield.value}"'
     }]
 ...

类里面需要提供这个配置对象：

Ext.define('App.foo.Bar', {
     publishes: {
         foo: true,
         bar: true
     }
 });

For instances this value can be specified as a value as show above or an array or object as follows:

 {
     xtype: 'textfield',
     reference: 'somefield',
     publishes: [
         'value',
         'rawValue',
         'dirty'
     ]
 }

 // This achieves the same result as the above array form.
 {
     xtype: 'textfield',
     reference: 'somefield',
     publishes: {
         value: true,
         rawValue: true,
         dirty: true
     }
 }

有时候用户可能需要将某个属性传达给视图模型，只是那个属性可能并没有在类块中进行定义。在这个情况下，可以使用publishState，如果那个属性有一个setter方法。现在我们来看一个setFieldLabel例子：

  setFieldLabel: function(fieldLabel) {
      this.callParent(arguments);
      this.publishState('fieldLabel', fieldLabel);
  }   

使用上面这个例子，fieldLabel会被传递给视图模型。
store

Ext.define('KitchenSink.store.States', {
    extend: 'Ext.data.ArrayStore',

    alias: 'store.states',

    model: 'KitchenSink.model.State',

    storeId: 'states',

    data: [
        [0, 'AL', 'Alabama', 'The Heart of Dixie'],
        [1, 'AK', 'Alaska', 'The Land of the Midnight Sun'],
        [2, 'AZ', 'Arizona', 'The Grand Canyon State'],
        [3, 'AR', 'Arkansas', 'The Natural State'],
        [4, 'CA', 'California', 'The Golden State'],
        [5, 'CO', 'Colorado', 'The Mountain State'],
        [6, 'CT', 'Connecticut', 'The Constitution State'],
        [7, 'DE', 'Delaware', 'The First State'],
        [8, 'DC', 'District of Columbia', "The Nation's Capital"],
        [9, 'FL', 'Florida', 'The Sunshine State'],
        [10, 'GA', 'Georgia', 'The Peach State'],
        [11, 'HI', 'Hawaii', 'The Aloha State'],
        [12, 'ID', 'Idaho', 'Famous Potatoes'],
        [13, 'IL', 'Illinois', 'The Prairie State'],
        [14, 'IN', 'Indiana', 'The Hospitality State'],
        [15, 'IA', 'Iowa', 'The Corn State'],
        [16, 'KS', 'Kansas', 'The Sunflower State'],
        [17, 'KY', 'Kentucky', 'The Bluegrass State'],
        [18, 'LA', 'Louisiana', 'The Bayou State'],
        [19, 'ME', 'Maine', 'The Pine Tree State'],
        [20, 'MD', 'Maryland', 'Chesapeake State'],
        [21, 'MA', 'Massachusetts', 'The Spirit of America'],
        [22, 'MI', 'Michigan', 'Great Lakes State'],
        [23, 'MN', 'Minnesota', 'North Star State'],
        [24, 'MS', 'Mississippi', 'Magnolia State'],
        [25, 'MO', 'Missouri', 'Show Me State'],
        [26, 'MT', 'Montana', 'Big Sky Country'],
        [27, 'NE', 'Nebraska', 'Beef State'],
        [28, 'NV', 'Nevada', 'Silver State'],
        [29, 'NH', 'New Hampshire', 'Granite State'],
        [30, 'NJ', 'New Jersey', 'Garden State'],
        [31, 'NM', 'New Mexico', 'Land of Enchantment'],
        [32, 'NY', 'New York', 'Empire State'],
        [33, 'NC', 'North Carolina', 'First in Freedom'],
        [34, 'ND', 'North Dakota', 'Peace Garden State'],
        [35, 'OH', 'Ohio', 'The Heart of it All'],
        [36, 'OK', 'Oklahoma', 'Oklahoma is OK'],
        [37, 'OR', 'Oregon', 'Pacific Wonderland'],
        [38, 'PA', 'Pennsylvania', 'Keystone State'],
        [39, 'RI', 'Rhode Island', 'Ocean State'],
        [40, 'SC', 'South Carolina', 'Nothing Could be Finer'],
        [41, 'SD', 'South Dakota', 'Great Faces, Great Places'],
        [42, 'TN', 'Tennessee', 'Volunteer State'],
        [43, 'TX', 'Texas', 'Lone Star State'],
        [44, 'UT', 'Utah', 'Salt Lake State'],
        [45, 'VT', 'Vermont', 'Green Mountain State'],
        [46, 'VA', 'Virginia', 'Mother of States'],
        [47, 'WA', 'Washington', 'Green Tree State'],
        [48, 'WV', 'West Virginia', 'Mountain State'],
        [49, 'WI', 'Wisconsin', "America's Dairyland"],
        [50, 'WY', 'Wyoming', 'Like No Place on Earth']
    ]
});

model

Ext.define('KitchenSink.model.State', {
    extend: 'KitchenSink.model.Base',

    fields: [
        'abbr',
        'state',
        'description',
        'country'
    ]
});