html页面代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIY to Buttons</title>
<script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch.js"></script>
<link href="sencha-touch-1.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<style>
.car1 {
background: #dee8f8;
}
.car2 {
background: #cbdcc5;
}
.car3 {
background: #999999;
}
.person {
background: #666666;
}
.other {
background: Silver;
}
.slide {
background: #9E9E9E;
}
</style>
<script type="text/javascript" src="Buttons_DIY.JS"></script>
<script type="text/javascript">
</script>
</head>
<body></body>
</html>
js页面代码为：
var buttons = new Ext.Application({
launch: function() {
//创建实体
Ext.regModel('Contact', {
fields: ['firstName', 'lastName'] //必须给实体指定属性，也就是字段名称。
});
//alert("senchaTouch Ready to go!");
this.btns = new Ext.TabPanel({
fullscreen: true, //满屏
ui: "dark",
tabBarDock: 'top', //cardbar停靠的地方：top and bottom
//card switch animation:'fade(褪色渐变)', 'slide(滑动)', 'flip(翻转)',
//'cube(貌似跟‘滑动’效果一样)', 'pop(中间突出)', 'wipe(擦_令人吃惊,后面的颜色把前面的颜色覆盖。)'), or false.
//Defaults to 'slide'
cardSwitchAnimation: 'fade',
dockedItems: [ //可以认为是停靠工具栏: can be docked to either the top, right, left or bottom of a panel.
{
xtype: 'toolbar',
dock: 'bottom', //停靠的位置
items: [
{
text: "Normal",
ui: "normal" //可认为：button的表现显示：有Normal、round、small
}, {
text: "round",
ui: "round"
}, {
text: "small",
ui: "small"
}, {
text: "decline",
ui: "decline" //也有：decline(红色显示)、decline-round、decline-small
}, {
text: "decline-round",
ui: "decline-round"
}, {
text: "decline-small",
ui: "decline-small"
}, {
text: "confirm",
ui: "confirm" //也有：confirm(绿色显示 )、confirm-round、confirm-small
}, {
text: "confirm-round",
ui: "confirm-round"
}, {
text: "confirm-small",
ui: "confirm-small"
}, {
text: "action",
ui: "action",
handler: function() {
alert("This is Action Btn!");
}
}, {
text: "drastic",
ui: "drastic"
}, {
text: "back",
ui: "back"
}, {
text: "forward",
ui: 'forward'
}
]
}
],
items: [ //经验：这里，相当于ExtJs中的tabpanel，唯一的区别是：显示的方式不同。
{
title: "firstCard",
html: "Number One",
cls: "car1"
}, {
title: "secondCard",
html: "Number Two",
cls: "car2"
}, {
title: "thirdCard",
html: "Number threed",
cls: "car3"
}, {
title: "通讯录",
xtype: "list",
fullscreen: true,
scroll: 'vertical',
itemTpl: '{firstName}.{lastName}',
store: new Ext.data.JsonStore({
model: 'Contact', //实体
sorters: 'firstName', //按lastName搜索
//分组方法：
getGroupString: function(record) {
return record.get("firstName")[0];
},
data: [
{firstName: 'Aaron', lastName: 'Avins'},
{firstName: 'Ardener', lastName: 'Avins'},
{firstName: 'Ande', lastName: 'Avins'},
{firstName: 'Anny', lastName: 'Avins'},
{firstName: 'Aran', lastName: 'Avins'},
{firstName: 'Bard', lastName: 'Baron'},
{firstName: 'Bond', lastName: 'Baron'},
{firstName: 'Boderren', lastName: 'Baron'},
{firstName: 'Bendon', lastName: 'Baron'},
{firstName: 'Boren', lastName: 'Baron'},
{firstName: 'Bend', lastName: 'Baron'},
{firstName: 'Canson', lastName: 'Condon'},
{firstName: 'Conke', lastName: 'Condon'},
{firstName: 'Cann', lastName: 'Condon'},
{firstName: 'Cannerd', lastName: 'Condon'},
{firstName: 'Denmen', lastName: 'Dondon'},
{firstName: 'Dany', lastName: 'Dondon'},
{firstName: 'Dann', lastName: 'Dondon'},
{firstName: 'Emder', lastName: 'Emberren'},
{firstName: 'Emder', lastName: 'Emberren'},
{firstName: 'Emder', lastName: 'Emberren'},
{firstName: 'Foder', lastName: 'Femberren'},
{firstName: 'Fender', lastName: 'Femberren'},
{firstName: 'Ferder', lastName: 'Femberren'},
{firstName: 'Gender', lastName: 'Gerberren'},
{firstName: 'Gemer', lastName: 'Gerberren'},
{firstName: 'Geny', lastName: 'Gerberren'},
{firstName: 'Gencord', lastName: 'Gerberren'},
{firstName: 'Herberren', lastName: 'Herberren'},
{firstName: 'Herben', lastName: 'Herberren'},
{firstName: 'Herren', lastName: 'Herberren'},
{firstName: 'Imbenen', lastName: 'Imberren'},
{firstName: 'Imren', lastName: 'Imberren'},
{firstName: 'Imber', lastName: 'Imberren'},
{firstName: 'Jen', lastName: 'Jenberren'},
{firstName: 'Jeny', lastName: 'Jenberren'},
{firstName: 'Jenren', lastName: 'Jenberren'},
{firstName: 'Kember', lastName: 'Kemberren'},
{firstName: 'Kemren', lastName: 'Kemberren'},
{firstName: 'Kemnin', lastName: 'Kemberren'},
{firstName: 'Lenberren', lastName: 'Lenberren'},
{firstName: 'Lenner', lastName: 'Lenberren'},
{firstName: 'Lenber', lastName: 'Lenberren'},
{firstName: 'Moberren', lastName: 'Moberren'},
{firstName: 'Mober', lastName: 'Moberren'},
{firstName: 'Moner', lastName: 'Moberren'},
{firstName: 'Nerbor', lastName: 'Nerboren'},
{firstName: 'Neben', lastName: 'Nerboren'},
{firstName: 'Nerren', lastName: 'Nerboren'},
{firstName: 'Oberren', lastName: 'Oberren'},
{firstName: 'Oren', lastName: 'Oberren'},
{firstName: 'Ober', lastName: 'Oberren'},
{firstName: 'Pen', lastName: 'Penberren'},
{firstName: 'Penren', lastName: 'Penberren'},
{firstName: 'Penberren', lastName: 'Penberren'},
{firstName: 'Queberren', lastName: 'Queberren'},
{firstName: 'Quen', lastName: 'Queberren'},
{firstName: 'Queber', lastName: 'Queberren'},
{firstName: 'Remberren', lastName: 'Remberren'},
{firstName: 'Rember', lastName: 'Remberren'},
{firstName: 'Remn', lastName: 'Remberren'},
{firstName: 'Senberren', lastName: 'Senberren'},
{firstName: 'Senber', lastName: 'Senberren'},
{firstName: 'Senren', lastName: 'Senberren'},
{firstName: 'Tenberren', lastName: 'Tenberren'},
{firstName: 'Ten', lastName: 'Tenberren'},
{firstName: 'Tenren', lastName: 'Tenberren'},
{firstName: 'Tenren', lastName: 'Tenberren'},
{firstName: 'Ubenren', lastName: 'Ubenren'},
{firstName: 'Uben', lastName: 'Ubenren'},
{firstName: 'Uren', lastName: 'Ubenren'},
{firstName: 'Venben', lastName: 'Venberren'},
{firstName: 'Venberren', lastName: 'Venberren'},
{firstName: 'Veren', lastName: 'Venberren'},
{firstName: 'Venboren', lastName: 'Venberren'},
{firstName: 'Wenben', lastName: 'Wenberren'},
{firstName: 'Wenberren', lastName: 'Wenberren'},
{firstName: 'Webery', lastName: 'Wenberren'},
{firstName: 'Wensen', lastName: 'Wenberren'},
{firstName: 'Xtenberren', lastName: 'Xtenberren'},
{firstName: 'Xten', lastName: 'Xtenberren'},
{firstName: 'Xberren', lastName: 'Xtenberren'},
{firstName: 'Xtenden', lastName: 'Xtenberren'},
{firstName: 'Xtenken', lastName: 'Xtenberren'},
{firstName: 'Yorren', lastName: 'Yorren'},
{firstName: 'Yocen', lastName: 'Yorren'},
{firstName: 'Yoken', lastName: 'Yorren'},
{firstName: 'Yoben', lastName: 'Yorren'},
{firstName: 'Yoden', lastName: 'Yorren'},
{firstName: 'Yogen', lastName: 'Yorren'},
{firstName: 'Zenden', lastName: 'Zenberren'},
{firstName: 'Zenken', lastName: 'Zenberren'},
{firstName: 'Zenen', lastName: 'Zenberren'},
{firstName: 'Zendercn', lastName: 'Zenberren'},
{firstName: 'Zenberren', lastName: 'Zenberren'}
]
}),
indexBar: true, //字母选择工具
grouped: true //分组
}, {
title: "form(表单)",
items: [{
xtype: "tabpanel",
cardSwitchAnimation: 'fade',
fullscreen: true,
ui: 'light', //使tab的标题有凹陷效果并文字变亮。
items: [{
title: "个人信息",
cls: 'person',
xtype: "form", //表单
id: "basicform",
scroll: 'vertical', //有垂直滚动条。
items: [ //表单组件
{
layout: 'vbox',
defaults: {
xtype: 'button',
flex: 1, //角的弯曲度吧。
stype: 'margin: .5em;'
},
items: [{
text: '禁用表单',
scope: this,
hasDisabled: false, //自定义一个属性：用于控制按钮文字的显示问题
handler: function(btn) {
var form = Ext.getCmp('basicform');
if(btn.hasDisabled) { //启用表单
form.enable();
btn.hasDisabled = false; //启动后就显示禁用
btn.setText('禁用表单');
} else { //禁用表单
form.disable();
btn.hasDisabled = true; //改为启用
btn.setText('启用表单');
}
}
}, {
text: '重置表单',
handler: function() {
Ext.getCmp('basicform').reset();
}
}]
}, {
xtype: 'fieldset', //采用fieldset进行归类
title: "PersonalInfo",
instructions: 'Please enter the information of you above.',//对fieldset的解说：在其底下居中显示。
defaults: { //对表单组件的默认设置
//labelAlign: 'right', //在输入框右边显示。
labelWidth: "35%"
},
items: [
{
xtype: 'searchfield',
placeHolder: 'search',
name: 'search',
labelAlign: 'right',
label: "搜索_searchfield"
}, {
xtype: 'textfield',
name: 'name',
label: '姓名_textfield',
placeHolder: '岑业宝', //初始值，既默认输入的值。
autoCapitalize: true,
required: true,
useClearIcon: true //有删除按钮
}, {
xtype: "passwordfield",
name: 'password',
label: '密码_passwordfield',
useClearIcon: true
}, {
xtype: 'emailfield',
name: 'email',
label: '邮箱_emailfield',
placeHolder: 'abc@126.com',
useClearIcon: true
}, {
xtype: 'urlfield',
name: 'url',
label: "个人主页_urlfield",
placeHolder: 'http://cenyebao.com',
useClearIcon: true
}, {
xtype: 'checkboxfield',
name: 'terms',
label: "是否接受条款_checkboxfield"
}, {
xtype: 'datepickerfield',
name: 'birthday',
label: '出生日期_datepickerfield',
picker: { yearFrom: 1987 }
}, {
xtype: 'selectfield',
name: 'professional',
label: "职业_selectfield",
options: [
{
text: '程序员',
value: 'programmers'
}, {
text: '软件培训师',
value: 'trainers'
}
]
}, {
xtype: 'hiddenfield',
name: 'secret',
label: false
}, {
xtype: 'textareafield',
name: 'resume',
label: "简历_textareafield"
}
]
}, {
xtype: 'fieldset',
title: 'FavoriteColor_radiofield',
instructions: 'Please select you favorite color!',
defaults: {
xtype: "radiofield",
labelWidth: "35%"
},
items: [
{
name: "color",
value: 'red',
label: '红色'
}, {
name: 'color',
value: 'blue',
label: '蓝色'
}, {
name: 'color',
value: 'green',
label: '绿色'
}, {
name: "color",
value: 'purple',
label: '紫色'
}
]
}]
}, {
title: '滑动条',
cls: 'slide',
xtype: 'form',
items: [{
xtype: 'fieldset',
defaults: {
labelAlign: 'right'
},
items: [{
xtype: 'sliderfield',
name: 'slidervalue',
label: '滑动值_sliderfield'
}, {
xtype: 'togglefield', //姑且称为切换按钮吧。
name: 'enable',
label: '禁用/启用_togglefield'
}]
}]
}, {
title: "其他情况_搜索工具栏",
cls: 'other', //当xtype为'form'时，背景颜色就不起作用。被同一设置为表单颜色，我想。
styleHtmlContent: true,
xtype: 'form',
scroll: 'vertical',
html: '大家可以通过搜索栏来搜索信息。',
dockedItems: [ //可以放置多个toolbar
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'searchfield',
placeHolder: 'search',
id: 'search',
name: 'search'
}, {
xtype: 'button',
text: '搜索',
ui: 'action',
handler: function() {
var search = Ext.getCmp('search').getValue();
Ext.getCmp('searchOut').setValue(search);
}
}
]
}
],
items: [
{
xtype: 'textfield',
id: 'searchOut',
label: '搜索限制条件为：'
}
]
}] // end of tab
}]
}
]
});
}
});
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
