Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var form;
Ext.regModel('User', { //创建模型
fields: [
{name: 'name', type: 'string'},
{name: 'password', type: 'password'},
{name: 'email', type: 'string'},
{name: 'url', type: 'string'},
{name: 'rank', type: 'string'},
{name: 'enable', type: 'boolean'},
{name: 'cool', type: 'boolean'},
{name: 'color', type: 'string'},
{name: 'team', type: 'string'},
{name: 'secret', type: 'boolean'}
]
});
Ext.regModel('Ranks', { //创建模型
fields: [
{name: 'rank', type: 'string'},
{name: 'title', type: 'string'}
]
});
var ranksStore = new Ext.data.JsonStore({ //创建Json
data : [
{ rank : 'master', title : 'Master'},
{ rank : 'padawan', title : 'Student'},
{ rank : 'teacher', title : 'Instructor'},
{ rank : 'aid', title : 'Assistant'}
],
model : 'Ranks',
autoLoad : true,
autoDestroy : true
});
var formBase = {
scroll: 'vertical',
url : 'postUser.php',
standardSubmit : false,
items: [{
xtype: 'fieldset', //form 域
title: 'Personal Info', // 域标题显示文字
instructions: 'Please enter the information above.', //域结尾显示文字
defaults: {
required: true,
labelAlign: 'left', //控件显示位置
labelWidth: '40%' // label 占行比例
},
items: [
{
xtype: 'textfield', //文本框
name : 'name',
label: 'Name',
useClearIcon: true, //当在文本框内输入文字时 显示删除文字的图标
autoCapitalize : false //获取时文字转为大写？ 未实验
}, {
xtype: 'passwordfield', //密码框
name : 'password',
label: 'Password',
useClearIcon: false
}, {
xtype: 'textfield',
name : 'disabled',
label: 'Disabled',
//disabled: true, //控件不可用
inputType : "file", //选择文件
useClearIcon: true
}, {
xtype: 'emailfield', //邮箱框
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com', //默认显示文字
useClearIcon: true
}, {
xtype: 'urlfield', //网址框
name : 'url',
label: 'Url',
placeHolder: 'http://sencha.com',
useClearIcon: true
}, {
xtype: 'checkboxfield', //复选框
name : 'cool',
label: 'Cool',
value: true // 值
}, {
xtype: 'spinnerfield', //HTML5 数字字段
name : 'spinner',
label: 'Spinner'
}, {
xtype: 'selectfield', //选择框
name : 'rank',
label: 'Rank',
valueField : 'rank', //值 用数据中的 rank 字段
displayField : 'title', //显示用数据中的title字段
store : ranksStore //数据源
}, {
xtype: 'hiddenfield', //隐藏域
name : 'secret',
value: 'false'
}, {
xtype : 'textareafield', //大文本域
name : 'bio',
label : 'Bio',
maxLength : 60, //长度最大值
maxRows : 10 //高度最大值
}, {
xtype: 'sliderfield', //滑动选择数值
value : 5, //当前值
minValue: 0, //最小值
maxValue: 10, //最大值
name : 'height',
label: 'Height'
}, {
xtype: 'togglefield', //切换框 选择是否
name : 'enable',
label: 'Security Mode'
}, {
xtype: 'radiofield', //单选
name: 'team', //同名为一组
label: 'Red Team',
value : 'redteam'
}, {
xtype: 'radiofield',
name: 'team',
label: 'Blue Team',
value: 'blueteam'
}]
}, {
xtype: 'fieldset', //新的域
title: 'Favorite color',
defaults: { xtype: 'radiofield' }, //默认类型 单选框
items: [
{
name : 'color',
label: 'Red',
value : 'red'
},
{
name : 'color',
label: 'Green' ,
checked : true, //默认选择
value : 'green'
}
]
}, {
xtype: 'fieldset', //新的域
title: 'HTML5',
items: [{
xtype: 'numberfield', //数字框
name: 'number',
label: 'Number',
maxValue : 20, //最大值 就算设定最大值和最小值 也可以手动输入 大于这个值的数
minValue : 2 //最小值
}, {
xtype: 'emailfield',
name: 'email2',
label: 'Email',
useClearIcon: true
}, {
xtype: 'urlfield',
name: 'url2',
label: 'URL',
useClearIcon: true
}]
},{
xtype: 'fieldset',
title: 'Single Select (in fieldset)',
items: [{
xtype: 'selectfield',
name: 'options',
options: [
{text: 'This is just a big select with text that is overflowing', value: '1'},
{text: 'Another item', value: '2'}
]
}]
}, {
xtype: 'fieldset',
title: 'Single Text (in fieldset)',
items: [{
xtype: 'textfield',
name: 'single_text',
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Single Toggle (in fieldset)',
items: [{
xtype: 'togglefield',
name: 'single_toggle',
value : 1
}]
}, {
xtype: 'fieldset',
title: 'Single Slider (in fieldset)',
items: [{
xtype: 'sliderfield',
name: 'single_slider',
value : 60
}]
}
],
listeners : {
submit : function(form, result){ //表单提交成功
alert();
console.log('success', Ext.toArray(arguments));
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments)); //表单提交异常
}
},
dockedItems: [
{
xtype: 'toolbar', //工具栏
dock: 'bottom', //按钮
items: [
{
text: 'Load Model', //标题
ui: 'round', //使用 圆形 UI
handler: function() { //点击触发事件
formBase.user = Ext.ModelMgr.create({ //创建一个 ModelMgr
'name' : 'Akura',
'password': 'secret',
'email' : 'saru@sencha.com',
'url' : 'http://sencha.com',
'single_slider': 20,
'enable' : 1,
'cool' : true,
'team' : 'redteam',
'color' : 'blue',
'rank' : 'padawan',
'secret' : true,
'bio' : 'Learned the hard way !'
}, 'User'); //模型使用上面的 User
form.loadModel(formBase.user); //获取模型
}
},
{xtype: 'spacer'}, //空出中间位置
{
text: 'Reset',
handler: function() {
form.reset(); // 复位
}
},
{
text: 'Save',
ui: 'confirm', //使用 确认 UI
handler: function() {
if(formBase.user){
form.updateRecord(formBase.user, true);
}
form.submit({ //提交
waitMsg : {message:'Submitting', cls : 'demos-loading'}//载入层
});
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 585,
width: 680
});
}
form = new Ext.form.FormPanel(formBase);
form.show();
}
});
分享到：
相关推荐
自己基本测试了下可用，不过没有放入总条数之类的，长度有限,他的原理就是可以动态修改传递的start 以及 limit，如果有其他参数请在 store里面放入baseParams 参数如: , baseParams : { sort : 'foodprice ...
移动Web应用，简单来理解就是针对移动终端优化过的Web 站点，终端用户通过支持Html5、Css3、Javascript标准的Webkit内核浏览器访问部署在服务器的Web应用。
在本文中，我们将深入探讨如何使用TouchGFX框架在RT-Thread Studio中实现硬件交互，特别是在1.1版本中的具体应用。TouchGFX是一个高级图形库，专为嵌入式系统设计，它允许开发者创建丰富的用户界面，并与硬件进行...
在本教程中，我们将深入探讨Sencha Touch 2中的MVC（Model-View-Controller）模式，并通过一个具体的登录界面例子来理解其工作原理。 MVC模式是软件设计中的经典架构，它将应用程序分为三个核心部分：模型（Model）...
"Pro Android学习：touch screen小例子"是一个教程，旨在帮助开发者理解和实践如何在Android应用中处理触摸事件和手势识别。在这个实例中，我们将深入探讨Android的触摸事件处理机制以及如何编写源代码来实现基本的...
这个"Sencha Touch例子"是针对初学者和开发者的一个优秀资源，帮助他们理解并掌握如何在实际项目中运用Sencha Touch的MVC（Model-View-Controller）架构。 MVC模式是软件工程中的一个经典设计模式，主要用于分离...
"Delphi XE5 Touch 测试例子" 是一个针对这一特性的实践案例，对于初学者来说，它提供了理解和掌握 Delphi XE5 触控编程的基础。 【描述】中的"纠结"可能指的是在开发过程中遇到的挑战，如事件处理、触摸响应的准确...
"Touch Test" 是一个专门用于检测和评估触摸驱动程序性能的工具。通过在屏幕上画点，用户可以直观地看到触摸屏驱动程序的工作效果，包括其精确度、响应速度和整体流畅性。 触摸驱动程序是操作系统与硬件之间的重要...
在这个简单的例子中，我们创建了一个全屏的`List`，数据源是包含美国总统名字的数组。`itemTpl`仅显示每个总统的名字。 为了使列表更具交互性，我们可以添加更多的功能，如点击事件监听器和分组功能。例如： ```...
2. **示例代码**：包含许多实际应用的例子，展示了如何在项目中使用Sencha Touch的各种功能。 3. **快速入门指南**：针对初学者的教程，引导他们快速上手Sencha Touch的开发环境和基本操作。 4. **用户手册**：...
在这个项目中，我们将讨论如何在野火STM32F429开发板上移植和适配TouchGFX，以实现具有图形界面的dome例子。 首先，我们需要了解STM32F429的基本特性。这款微控制器基于ARM Cortex-M4内核，拥有高速浮点运算单元...
Sencha Touch 是一款专为移动设备设计的前端框架，它提供了丰富的组件库和强大的数据管理功能，用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素，让我们逐一解析这些...
在这个"sencha touch 例子 Tabs 和 Toolbars 使用"的教程中，我们将深入探讨如何利用Sencha Touch来实现Tab面板和工具栏的功能。 首先，让我们来看看Tab面板（Tabs）。在Sencha Touch中，TabPanel是一种布局类型，...
《 Lean Touch+ 深入学习与用法详解》 Unity引擎在游戏开发领域具有广泛的应用，其中， Lean Touch+ 是一款专为Unity设计的触摸交互工具，它极大地提升了移动平台上的用户界面（UI）交互体验。这款资产在AssetStore...
【应用】★★★★-iPad Multi-Touch.zipIOS应用例子源码下载【应用】★★★★-iPad Multi-Touch.zipIOS应用例子源码下载 1.适合学生学习研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
SoundTouch 音频处理库，将官网三个工程进行集成后，在vs2015环境下编译成功，可以跑通，示例中参数为3倍速播放，可以生成加速语音，且语音未变调。 SoundTouch 是一个开源的音频处理库，主要实现包含变速、变调、...
TouchGFX是一款强大的图形用户界面（GUI）开发框架，专为嵌入式系统设计，尤其适用于需要高效、高质量2D图形的应用。本教程将引导您了解TouchGFX的基础知识，并展示如何利用它来创建和优化GUI。 首先，让我们深入...
TouchGFX开发(3)----使用TouchGFX配置IIC接口OLED CSDN文字教程：https://blog.csdn.net/qq_24312945/article/details/130689223 B站教学视频：https://www.bilibili.com/video/BV17m4y1t7RT/ 本篇文章的主题是...
《Unity触控系统源码TouchScript深度解析》 Unity3d作为一款强大的游戏开发引擎，其在移动设备上的应用越来越广泛。随着触控设备的普及，触控交互成为了游戏开发中不可或缺的一部分。TouchScript，正是这样一套专为...
TouchGFX是一款专门为STM平台（以及可以移植到其他嵌入式平台）设计的GUI解决方案，提供类Android的视觉效果，旨在帮助开发者实现自定义的UI界面设计。该软件的参考手册提供了丰富的信息和指导，帮助开发者进行安装...