Sencha Touch学习使用心得 Unit 3

继续我们的征途......

本文介绍Model和Store的详细使用.Model和Store是要配合使用的好基友。

我们来运用Model和Store来修改一下查询页面的页面效果：即下图

Chapter 1:创建Model

　　　　Model类似实体,继承在Ext.data.Model下,配置fields：字段 属性

Ext.define('ST.model.Unit', {
    extend: 'Ext.data.Model',
    config: {
        //identifier:"uid",
        fields: [
    {
        name: 'sid',
        type: 'string'
    }, {
        name: 'unit',
        type: 'string'
}]

    }
});

Chapter 2:配置Store

　　　　Store继承在Ext.data.Store下,Store就是数据源,如有Extjs基础就方便理解,既可以后台赋予数据,也可本地配置数据

咱们查询页面要做的Selected样式就需要本地Store数据.

　　　　在配置config里,必须要指定Model,才能配合使用,配置storeid才能方便查找使用.在data中配置里本地数据,稍后会演示异步获取数据的案例

Ext.define('ST.store.Units', {
    extend: 'Ext.data.Store',
    config: {
    model: 'ST.model.Unit',
        storeId: 'units',
        data: [{
            sid:'1',
            unit: '单号'
        },
        {
            sid: '2',
            unit: '手机号'
        },
        {
            sid: '3',
            unit: 'AppleID'
        },
        {
            sid: '4',
            unit: '序列号'
}]
        }

    });

Chapter 3:前台页面展示

　　　　将原来的两个文本框注释,换成SelectFied组件（其他数据组件也可以）.SelectFied数据源指定StoreId,其他配置都能看懂吧

Ext.define('ST.view.query', {       //创建视图
    extend: 'Ext.form.Panel',//继承在Ext.form.Panel下
    config: {
        tabBar: {
            ui: "neutral",
            layout: {
                pack: "center"
            }
        },
        fullscreen: true,
        id: "queryForm",
        items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: '查询页'
        },
        { xtype: "spacer", height: 30 },
        {
            xtype: "fieldset",
            title: " ",
            instructions: "Please enter your info.",
            defaults: {
                labelWidth: '35%'
            },
            items: [
            {
                xtype: 'selectfield',
                name: 'unit',
                itemId: 'sid',
                label: '查询类型',
                valueField: 'unit',
                displayField: 'unit',
                store: 'units',
                queryMode: 'local'
            },
        {
            xtype: 'textfield',
            border: 1,
            id: "login_info",
            placeHolder: "请输入查询信息",
            label: '查询信息'
        },
//                            {
//                            xtype: 'textfield',
//                            id: "login_phonenum",
//                            placeHolder: "请输入手机号",
//                            label: '手机号'
//                        },
//                        {
//                            xtype: 'textfield',
//                            border: 1,
//                            id: "login_appleid",
//                            placeHolder: "请输入AppleID",
//                            label: 'AppleID'
//                        }
]
        },
        { xtype: "spacer", height: "4px" }, {
            xtype: 'button',
            itemId: 'btnQuery',
            text: '查询'
        },
                    {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: [{
                            xtype: 'spacer'
                        }
                        ]
}]
    }
});

运行结果......就是第一个图