程序博客网 > go软件

SenchaTouch翻译

来源：互联网 发布：go软件 编辑：程序博客网 时间：2024/05/04 02:48
Sencha Touch翻译Components

Using Forms in Sencha Touch

大部分需要用户输入的应用都使用表格。在ST中，表格是一个用标准HTML5封装好的表格，并且有数据验证、提交数据并且提供了一个简单的方式去布局，而且布局相当的吸引人。

Creating a Form

表单面板呈现了一系列的表单字段，而且提供便利的方法去加载保存数据，通常一个表单包含一系列你想呈现的字段，根据items配置项进行配置。
Ext.create('Ext.form.Panel', {
    fullscreen: true,
 
    items: [
        {
            xtype: 'textfield',
            name : 'name',
            label: 'Name'
        },
        {
            xtype: 'emailfield',
            name : 'email',
            label: 'Email'
        },
        {
            xtype: 'passwordfield',
            name : 'password',
            label: 'Password'
        }
    ]
});

Loading Data

我们可以用setValues方法向表单载入数据
form.setValues({    name: 'Ed',    email: 'ed@sencha.com',    password: 'secret'});
你也可以加载模型实例到表单中。例如假设你有一个User模型
Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name', 'email', 'password']
    }
});

var ed = Ext.create('MyApp.model.User', {
    name: 'Ed',
    email: 'ed@sencha.com',
    password: 'secret'
});

form.setRecord(ed);
Retrieving Form Data
向表单中取回数据通常用getValue方法
var values = form.getValues();// values now looks like this:{    name: 'Ed',    email: 'ed@sencha.com',    password: 'secret'}
另外也可以在个别的字段上监听改变的事件为了尽早的得到用户做出改变的通知。下面的例子只要表单的任何字段改变都将更新模型User
var form = Ext.create('Ext.form.Panel', {    listeners: {        '> field': {            change: function(field, newValue, oldValue) {                ed.set(field.getName(), newValue);            }        }    },    items: [        // as before    ]});
Submitting Forms
ST提供若干的方式去提交表单数据，在之前的例子我们有一个更新的模型实例，我们可以用模型的save方法去保持改变，而不需要用传统的提交方式。另外，我们可以用submit方法向普通的浏览器提交表单
form.submit({    url: 'url/to/submit/to',    method: 'POST',    success: function() {        alert('form submitted successfully!');    }});
Using DataViews in Sencha Touch
dataview可以简单的动态创建若干组件，通常不基于store。它被用来呈现后台或者其他数据源的数据。每当你想展示一系列重复的组件时你可以用dataview，例如以下的这些情况。
1.邮件应用中的信息列表
2.推特上的最新的消息
Creating a Simple DataView
最简单的，一个dataview包含一个store（数据），和项目模板（呈现）
var touchTeam = Ext.create('Ext.DataView', {
    fullscreen: true,
 
    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },
 
    itemTpl: '{name} is {age} years old'
});
在这个例子中我们定义了一个内联的store，所以所有的数据都是本地的，因此没有必要向服务器请求。为store中定义的五组数据项的每一项，dataview都渲染了一个Component并且传入了数据。这个组件使用指定的tpl并且将数据填充至由大括号包裹的占位符中。
因为dataview集成了store，任何对store的改变都会立即反应在屏幕上。
touchTeam.getStore().add({    name: 'Abe Elias',    age: 33});
这都是自动改变的，不需要我们手动的修改dataview。我们也可以修改store中的record进行更新。
touchTeam.getStore().getAt(0).set('age', 42);
这将会得到store中的第一个数据项。
Loading Data from a Server
我们经常想从我们服务器或者其他的网络服务上加载数据，所以我们不需要在本地手动编写数据内容。我们想要从推特上加载关于ST的最新的信息到dataview，并且加载用户的照片，姓名和消息。
Ext.create('Ext.DataView', {    fullscreen: true,    store: {        autoLoad: true,        fields: ['from_user', 'text', 'profile_image_url'],        proxy: {            type: 'jsonp',            url: 'http://search.twitter.com/search.json?q=Sencha Touch',            reader: {                type: 'json',                rootProperty: 'results'            }        }    },    itemTpl: '<img src="{profile_image_url}" /><h2>{from_user}</h2><p>{text}</p>'});
在上面的例子中，dataview不在包含data项，反而我们用了Proxy，它可以抓取数据。在这里，我们用了jsonP代理，去加载推特的搜索接口即可得到数据。我们也为呈现每个推特指定了fields，并且用了autoload配置自动加载数据。最后我们配置了Reader去解码来自推特的响应。
Styling a DataView
你可能发现我们的dataview没有默认的样式。添加样式是简单的，dataview有两种方式去定义样式：BaseCls和itemCls。baseCls被用来在dataview元素的外面添加一个类名。你提供的itemCls被添加在dataview的每一个项目上。
如果你不指定itemCls，它将自动采用baseCls配置（默认的是x-dataview）并且前置 -item。最终每一个项都有一个className叫做x-dataview-item
在添加配置前我们需要定义一个Css
.my-dataview-item {    background: #ddd;    padding: 1em;    border-bottom: 1px solid #ccc;}.my-dataview-item img {    float: left;    margin-right: 1em;}.my-dataview-item h2 {    font-weight: bold;}
定义好之后就可以配置了
Ext.create('Ext.DataView', {    fullscreen: true,    store: {        autoLoad: true,        fields: ['from_user', 'text', 'profile_image_url'],        proxy: {            type: 'jsonp',            url: 'http://search.twitter.com/search.json?q=Sencha Touch',            reader: {                type: 'json',                root: 'results'            }        }    },    itemTpl: '<img src="{profile_image_url}" /><h2>{from_user}</h2><p>{text}</p>',    baseCls: 'my-dataview'    //As described above, we don't need to set itemCls in most cases as it will already add a className    //generated from the baseCls to each item.    //itemCls: 'my-dataview-item'});
Component DataView
在之前的例子中我们用itemTpl创建dataview，这就意味着每一个项都是从template中渲染出来的。然而有时候你需要每一项是组件，所以你可以为用户提供一个丰富的UI。在ST中，我们介绍useCompoments配置，它可以为你提供解决方案。
创建一个组件的dataview与先前基于模板的dataview大差不离。当被用作在你的list中渲染每一项时，你必须定义项目视图。
Ext.define('MyListItem', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Button'],
    xtype: 'mylistitem',

    config: {
        nameButton: true,

        dataMap: {
            getNameButton: {
                setText: 'name'
            }
        }
    },

    applyNameButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getNameButton());
    },

    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            this.add(newNameButton);
        }
    }
});
上面的例子展示了如何去定义基于组件的dataview项组件。这里有重要的几点说明：
1.我们必须为每一项继承 Ext.dataview.component.DataItem 这是一个抽象类，它的作用是操纵为每一项进行处理的记录。
2.在继承代码的下面我们请求了 Ext.Button，因为我们打算向项组件里面插入button按钮。
3我们为这个项组件指定了xtype.
4.在配置块里面我们定义了nameButton项。通过 class system 被添加至组件的自定义的配置将被转化为一个buttton。默认情况下我们为他设置true，但是这也可能是一个配置块。这个配置自动的为nameButton项创建 getters and setters。
5.我们定义了 dataMap，这个datamap是记录数据和视图之间的地图。getNameButton是你想要更新实例的读取器；所以在这里我们想要的到组件的nameButton配置。在getNameButton块里面我们给实例一个设置器，setText并且给了它我们传递的记录的字段。最终，一旦这个项组件得到一个记录，他得到nameButton并且然后调用setText并且传入记录的name字段。
6.最后我们为nameButton项定义了apply方法，这个方法用 Ext.factory将被传入的配置转化为了button实例。那个实例然后被传回，然后触发了updataNameButton方法被调用。这个方法移除已存在的老的实例，并且加入新实例如果它存在。
在创建了项组件之后，我们可以创建dataview。
Ext.create('Ext.DataView', {
    fullscreen: true,
    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },

    useComponents: true,
    defaultType: 'mylistitem'
});
这段代码有两个关键的附件，首先我们设置useComponents为true。其次我们设置了defaultType。
下面我们为nameButton增加了事件监听
Ext.define('MyListItem', {
    //...

    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
            // when it happens
            newNameButton.on('tap', this.onNameButtonTap, this);

            this.add(newNameButton);
        }
    },

    onNameButtonTap: function(button, e) {
        var record = this.getRecord();

        Ext.Msg.alert(
            record.get('name'), // the title of the alert
            "The age of this person is: " + record.get('age') // the message of the alert
        );
    }
});
以下是完整的代码
Ext.define('MyListItem', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Button'],
    xtype: 'mylistitem',

    config: {
        nameButton: true,

        dataMap: {
            getNameButton: {
                setText: 'name'
            }
        }
    },

    applyNameButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getNameButton());
    },

    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
            // when it happens
            newNameButton.on('tap', this.onNameButtonTap, this);

            this.add(newNameButton);
        }
    },

    onNameButtonTap: function(button, e) {
        var record = this.getRecord();

        Ext.Msg.alert(
            record.get('name'), // the title of the alert
            "The age of this person is: " + record.get('age') // the message of the alert
        );
    }
});

Ext.create('Ext.DataView', {
    fullscreen: true,

    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },

    useComponents: true,
    defaultType: 'mylistitem'
});
Using Carousels in Sencha Touch
Carousels就像选项卡，一个很好的方法允许用户通过滑动刷的方式去浏览多种满屏幕的页面。一个Carousel在一个时间内只显示一个页面，但是允许你用滑动的手势去浏览其他的页面。你可以把Carousel看做一个单一的活动项，还有其他的延伸项或者在左面或者在右面，指示的点显示了有多少可用的屏幕可用滑动。
Carousels可用被定义为垂直或者水平的，并且可以很容易的去配置。它和其他的容器组件一样的工作。
Ext.create('Ext.Carousel', {
    fullscreen: true,

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            html : 'Item 1',
            style: 'background-color: #5E99CC'
        },
        {
            html : 'Item 2',
            style: 'background-color: #759E60'
        },
        {
            html : 'Item 3'
        }
    ]
});
你可以将任意的组件放至Carousel
Ext.create('Ext.Carousel', {
    fullscreen: true,

    items: [
        {
            xtype: 'list',

            items: {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Sencha Touch Team'
            },

            store: {
                fields: ['name'],
                data: [
                    {name: 'Rob'},
                    {name: 'Ed'},
                    {name: 'Jacky'},
                    {name: 'Jamie'},
                    {name: 'Tommy'},
                    {name: 'Abe'}
                ]
            },

            itemTpl: '{name}'
        },
        {
            xtype: 'fieldset',
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'Login'
                },
                {
                    xtype: 'textfield',
                    label: 'Name'
                },
                {
                    xtype: 'passwordfield',
                    label: 'Password'
                }
            ]
        }
    ]
});
0 0
go软件 go软件
原创粉丝点击
热门IT博客
ubuntu引导windows问题ubuntu引导windows问题
大数据在检测行业应用大数据在检测行业应用
8848 m3手机备份数据
java时间戳转换成毫秒
数据堂怎么兼职
淘宝卖nb正品
淘宝上怎样搜索店铺
matlab vwap算法
数据的完整性
淘宝达人主页链接
学软件测试工程师
mac os 修复系统方法
电子音乐专业制作软件
twitter视频保存软件
linux自动脚本
linux 解压gz文件
办公软件的使用方法
淘宝如何看自己退货率
php程序加密
一键铺货软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 末代皇后婉容 婉容和川岛芳子 婉容川岛芳子 川岛芳子婉容 婉容皇后复原图 川岛芳子和婉容 婉容死尸照片 婉容皇后被谁破的身 婉容减肥瘦身汤 婉容 末代皇帝 婉怡女鞋 婉慈 婉晴 婉晴和穆天阳洗碗是做 赵誉苏婉柔 婉瑜 婉甸旗舰店 婉甸 婉甸logo 婉甸服饰有限公司 婉秋 婉莹 婉莹雨薇晓雯雅仪第一部章节 婉莹雨薇晓雯雅仪目录 雨薇婉莹雅怡晓雯全集 婉蓉 婉蓉皇后 婉蓉是谁 婉蓉遗体照 婉蓉皇后和日本人睡觉 婉蓉皇后图片 婉转 婉转的意思 婉转的蓝 婉转的拼音 婉转承恩 婉转造句 婉转读音 婉转的蓝作品 婉转的近义词 婉转地什么填词语

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里