ExtJs之文本框及数字输入
2016-03-19 22:05
405 查看
结合HTML来理解,
比较容易。
比较容易。
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"> <script type="text/javascript" src="ExtJs/ext-all.js"></script> <script type="text/javascript" src="ExtJs/bootstrap.js"></script> <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.QuickTips.init(); var testForm = new Ext.form.Panel({ title: 'Ext.form.field.TextAreaSample', bodyStyle: 'padding: 5 5 5 5', frame: true, height: 150, width: 250, renderTo: 'formArea', items: [{ xtype: 'textarea', fieldLabel: 'memo', id: 'memo', labelSeparator: ':', labelWidth: 60, width: 200 }], buttons: [{text: 'ok', handler: showValue}] }); var loginForm = new Ext.form.Panel({ title: 'Ext.form.field.Text Sample', bodyStyle: 'padding: 5 5 5 5', frame: true, height: 150, width: 550, renderTo: 'form', defaultType: 'textfield', defaults: { labelSeparator: ':', labelWidth: 150, width: 500, allowBlank: false, labelAlign: 'left', msgTarget: 'side' }, items: [{ fieldLabel: 'username', name: 'userName', selectOnFocus: true, regex: /^([\w]+)(.[\w+]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, regexText: 'format error' }, { name: 'password', fieldLabel: 'password', inputType: 'password' }], buttons: [{ text: 'login', handler: function() { loginForm.form.setValues({userName: 'user@com', password: '123456'}); } }] }); var numberForm = new Ext.form.FormPanel({ title: 'Ext.form.field.Number.Sample', bodyStyle: 'padding: 5 5 5 5', renderTo: 'numberForm', frame: true, height: 350, width: 550, defaultType: 'numberfield', defaults: { labelSeparator: ':', labelWidth: 80, width: 200, labelAlign: 'left', msgTarget: 'side' }, items: [{ fieldLabel: 'Int', hideTrigger: true, allowDecimals: false, nanText: 'input valid number.' }, { fieldLabel: 'Float', decimalPrecision: 2, allowDecimals: true, nanText: 'input valid number.' }, { fieldLabel: 'Limit number', baseChars: '12345' },{ fieldLabel: 'Limit number', maxValue: 100, minValue: 50 }] }); function showValue(){ var memo = testForm.getForm().findField('memo'); alert(memo.getValue()); }; }); </script> </head> <body> <div id='form'></div> <div id='formArea'></div> <div id='numberForm'></div> <div id='errorMsg'></div> </body> </html>
相关文章推荐
- Javascript的封装
- ext.js的目录结构的简单解释
- [LeetCode][Java][JavaScript]Counting Bits
- JS---基础知识
- ExtJs之工具栏及菜单栏
- javascript 正则表达式
- Gson 常见json对象的解析
- C#中服务端接受前端JSON字符串转换成字典集合
- 欢迎使用CSDN-markdown编辑器
- 用javascript实现sliding door 的效果
- JS事件模型
- js积累
- js查找水仙花数
- javascript学习笔记
- JSONP理解
- 【js笔记】替换页面未加载默认图片
- 文件链接读取程序
- 小试牛刀3之JavaScript基础题
- JavaScript组件设计思想
- EaselJS的九宫格缩放图片