sencha touch学习心得之FormPanel
2011-12-06 11:23
113 查看
最近做了一些sencha touch的学习,对于自己进来的一些学习心得给大家分享一下。可能都是些基础的东西,没办法啦,呵呵 ,本人也是入门级的水平。先讨论一下sencha touch中最常用到的布局——FormPanel。
FormPanel是Panel的子类,就是一种表单显示形式的面板。
这是最简单的一种FormPanel。代码如下:
var FormTest = new Ext.form.FormPanel({
scroll: 'vertical',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',//文本输入框
name: 'name',
label: 'Name',
placeHolder: 'Tom Roy',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'passwordfield', //密码输入框
name: 'password',
label: 'Password',
useClearIcon: true
}, {
xtype: 'emailfield',
name: 'email',
label: 'Email',
placeHolder: 'me@sencha.com',
useClearIcon: true
}, {
xtype: 'urlfield',
name: 'url',
label: 'Url',
placeHolder: 'http://sencha.com',
useClearIcon: true
}, {
xtype: 'checkboxfield',
name: 'cool',
label: 'Cool'
}, {
xtype: 'datepickerfield',
name: 'birthday',
label: 'Birthday',
picker: { yearFrom: 1900 }
}, {
xtype: 'selectfield',
name: 'rank',
label: 'Rank',
options: [{
text: 'Master',
value: 'master'
}, {
text: 'Journeyman',
value: 'journeyman'
}, {
text: 'Apprentice',
value: 'apprentice'
}]
}, {
xtype: 'hiddenfield',
name: 'secret',
value: false
}, {
xtype: 'textareafield',
name: 'bio',
label: 'Bio'
}]
}
再对其中用到的一些组件进行说明:
①首先说说一下'textfield'和'textareafield',它们两个都是输入框,区别在于textfield是单行的输入框,而textareafield是 可以显示多行的。如果我们不想让它们的内容可编辑。我们可以为文本输入框添加:listeners:{
afterrender:function(ele){
ele.fieldEl.dom.readOnly = true;
}
},这样文本输入框就是只读的了。初始显示内容可以用value属性来定义。
②再说一下datepickerfield,这是一个日期选择框,显示效果很好,但是它的设计存在一些bug。先不讨论它的那些瑕疵。有时候我们要求它显示的年份,如果我们要求它显示的是当前时间。我们可以用value: new Date(),来定义。如果我们要求它的选择范围在2002年至但当前年份,可以用picker: { yearFrom: 2000 ,yearTo: new Date().getFullYear()},
来达到要求。该组件选择的时候默认显示是英文,还可以修改sencha-touch的源码进行汉化。
就先介绍这么多吧,有时间继续分享。
FormPanel是Panel的子类,就是一种表单显示形式的面板。
这是最简单的一种FormPanel。代码如下:
var FormTest = new Ext.form.FormPanel({
scroll: 'vertical',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',//文本输入框
name: 'name',
label: 'Name',
placeHolder: 'Tom Roy',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'passwordfield', //密码输入框
name: 'password',
label: 'Password',
useClearIcon: true
}, {
xtype: 'emailfield',
name: 'email',
label: 'Email',
placeHolder: 'me@sencha.com',
useClearIcon: true
}, {
xtype: 'urlfield',
name: 'url',
label: 'Url',
placeHolder: 'http://sencha.com',
useClearIcon: true
}, {
xtype: 'checkboxfield',
name: 'cool',
label: 'Cool'
}, {
xtype: 'datepickerfield',
name: 'birthday',
label: 'Birthday',
picker: { yearFrom: 1900 }
}, {
xtype: 'selectfield',
name: 'rank',
label: 'Rank',
options: [{
text: 'Master',
value: 'master'
}, {
text: 'Journeyman',
value: 'journeyman'
}, {
text: 'Apprentice',
value: 'apprentice'
}]
}, {
xtype: 'hiddenfield',
name: 'secret',
value: false
}, {
xtype: 'textareafield',
name: 'bio',
label: 'Bio'
}]
}
再对其中用到的一些组件进行说明:
①首先说说一下'textfield'和'textareafield',它们两个都是输入框,区别在于textfield是单行的输入框,而textareafield是 可以显示多行的。如果我们不想让它们的内容可编辑。我们可以为文本输入框添加:listeners:{
afterrender:function(ele){
ele.fieldEl.dom.readOnly = true;
}
},这样文本输入框就是只读的了。初始显示内容可以用value属性来定义。
②再说一下datepickerfield,这是一个日期选择框,显示效果很好,但是它的设计存在一些bug。先不讨论它的那些瑕疵。有时候我们要求它显示的年份,如果我们要求它显示的是当前时间。我们可以用value: new Date(),来定义。如果我们要求它的选择范围在2002年至但当前年份,可以用picker: { yearFrom: 2000 ,yearTo: new Date().getFullYear()},
来达到要求。该组件选择的时候默认显示是英文,还可以修改sencha-touch的源码进行汉化。
就先介绍这么多吧,有时间继续分享。
相关文章推荐
- sencha touch学习心得之FormPanel
- sencha touch学习心得之FormPanel
- sencha touch学习心得之FormPanel
- sencha touch学习心得之FormPanel
- Sencha Touch学习使用心得 Unit 2
- 从零开始学习Sencha Touch MVC应用之十七
- sencha touch 学习笔记- 基础中的基础(类和项目结构)(2013网页装在兜里)
- Cocoa Touch 入门记——《精通 iOS 开发》学习心得(4) [应用程序设置]
- 从零开始学习Sencha Touch MVC应用之十七
- 从零开始学习Sencha Touch MVC应用之三
- Sencha touch学习
- sencha touch 的Ext.menu组件学习
- Sencha Touch学习笔记(六)设备配置
- sencha touch 学习笔记- 安装与环境
- 从零开始学习Sencha Touch MVC应用之十七
- 事件组件sencha touch 学习笔记
- Sencha Touch学习笔记(二)组件
- sencha touch 入门学习资料大全
- sencha touch 路由学习
- 从零开始学习Sencha Touch MVC应用之十三