来自于《sencha touch 权威指南》
-------------------------------
一、网站结构
二、index.html代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>sencha touch</title> <link rel="stylesheet" type="text/css" href="css/sencha-touch.css" /> <script type="text/javascript" src="sencha-touch-debug.js"></script> <script type="text/javascript" src="app.js"></script> <style type="text/css"> .bgpink{background-color: #ccc;} .smallfont{font-size: small;} .dis {color: red;background-color: yellow;} </style> </head> <body> </body> </html>
三、app.js代码
Ext.require(['Ext.form.Panel','Ext.form.FieldSet','Ext.field.Text']); Ext.application({ name: 'MyApp', icon: 'images/icon.png', glossOnIcon: false, phoneStartupScreen: 'images/phone_startup.png', tabletStartupScreen: 'images/tablet_startup.png', launch: function(){ var formPanel = Ext.create('Ext.form.Panel',{ id: 'formPanel', scrollable: 'vertical', baseCls: 'bgpink', items:[{ xtype: 'fieldset', title: '电影信息', instructions: '请填写电影信息', defaults:{ label '20%', }, items: [{ xtype: 'textfield', id: 'txt_title', name: 'title', label: '标题', placeHolder: '请输入电影标题', required: true, clearIcon: true, listeners:{ change:function(item,newValue,oldValue){ console.log("修改前的值为" + oldValue); console.log("修改后的值为" + newValue); } } },{ xtype: 'textfield', id: 'txt_director', name: 'director', label: '导演', placeHolder: '请输入导演名称', clearIcon: true }] }] }); Ext.Viewport.add(formPanel); formPanel.getScrollable().getScroller().getFps(100); formPanel.getScrollable().getScroller().scrollTo(0,200); formPanel.getScrollable().getScroller().scrollToEnd(); } });
四、页面访问显示如下
-----------------------------
遇到的问题：
（1）、labelwidth 配置选项：值改变时，前台显示没有什么。不明白控制什么
（2）、disabledCls 配置选项：不起作用
（3）、Cls 配置选项：不起作用