Ext数据组件之Store，Model

版本：5.1.0

说在前面：多个Model通常和一个Store配合使用。Store是多个record的集合(record是model的实例)。

举个例子:Store最终是要服务于Ext的组件的，就比如多选框(combobox)和网格(grid)。那么，store是怎么给组件提供服务的呢，见代码：

1. combobox:

    'use strict';


    Ext.onReady(function(){

        var states = Ext.create('Ext.data.Store', {
            fields: [//要注意的是，Store的会根据fields里的元素自动创建Model。
                    //fields可以为空，Ext会根据数据的字段名，自行创建model
            // 'abbr', 'name'
            ],  
            data : [//准备的内联数据，可以内联，也可以请求获取，这里只做一个例子。
                {"abbr":"AL", "name":"Alabama"},
                {"abbr":"AK", "name":"Alaska"},
                {"abbr":"AZ", "name":"Arizona"}
                //...
            ]
        });


        //上方的Store会根据fields创建一个类似这样的model
        Ext.define('MyComboModel', {
            extend: 'Ext.data.Model',
            fields: [  //fields可以为空，但实例化的时候要写明
                // {name: 'abbr',  type: 'string'},  
                // {name: 'name',  type: 'string'}
            ]
        });


        Ext.create('Ext.window.Window', {
            title: 'Hello',
            height: 200,
            width: 400,
            layout: 'fit',
            items:[
                {
                    xtype:'form',
                    items:[
                        {
                            xtype:'combobox',
                            fieldLabel: 'Choose State',
                            store: states,
                            queryMode: 'local',
                            displayField: 'name',
                            valueField: 'abbr',
                            id:'mycombo'
                        },{
                            xtype:'button',
                            text:'点击',
                            handler:function(){

                                console.log('nmsl');

                                // var curType = Ext.create('MyComboModel', {
                                //     abbr : 'CS',
                                //     name:'长沙'
                                // });

                                var curType = new MyComboModel({
                                    'abbr':'CS',
                                    'name':'长沙'
                                });

                                // Ext.getCmp('button').
                                Ext.getCmp('mycombo').setSelection(curType);

                            }
                        }
                    ]
                }
            ]
        }).show();

    });