ExtJs日期控件:
ExtJs下拉列表控件:
ExtJs复选框控件:
ExtJs文本框控件:
ExtJs其他form表单控件:
//ExtJs代码 Ext.onReady(function() { // 使用表单提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式 // 日期 var _kssj = new Ext.form.DateField({ applyTo : 'kssj',//节点的id width : 185, editable : false, format : 'Y-m-d', emptyText : '' }); });
<input id="kssj" name="kssj" type="text"/>
ExtJs下拉列表控件:
Ext.onReady(function() { // 使用表单提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式 // 把已有的下拉框改变为Ext样式select or comboBox var objArray = Ext.DomQuery.select("select"); Ext.each(objArray, function(obj) { var btn = new Ext.form.ComboBox({ typeAhead : true, triggerAction : 'all', transform : obj, forceSelection : true }); }); var mzComboBox = new Ext.form.ComboBox({ applyTo : 'mzmc', width : 185, listWidth : 250,// 设置下拉框的宽度,默认和comboBoxTree的宽度相等 // maxHeight:'300',//combobox下拉列表框的高度 fieldLabel : '', name : 'mz', triggerAction : 'all', forceSelection : true, editable : false, pageSize : 10, emptyText : '', hiddenName : 'code', displayField : 'text',// 名称 valueField : 'code',// 值 store : new Ext.data.JsonStore({ autoLoad : true, url : 'Util/mzList.action?format=json', root : 'mzList', baseParams : { limit : 10, start : 0 }, totalProperty : 'mzCount', fields : ['id', 'code', 'text'] }), listeners : { select : function(_combo) { document.getElementById('mz').value = _combo.getValue(); } } }); });
<input id="mz" name="mz" type="hidden" value="" /> <input name="mzmc" id="mzmc" type="text" />
ExtJs复选框控件:
Ext.onReady(function() { // 使用表单提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式 //把已有的复选框改变为Ext样式 var objArray = Ext.DomQuery.select("input[type=checkbox]"); Ext.each(objArray, function(obj) { var checkbox = new Ext.form.Checkbox({ applyTo : obj }); }); });
<input name="bjfs" id="bjfs1" type="radio" value="0" />
ExtJs文本框控件:
Ext.onReady(function() { // 使用表单提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式 var xm = new Ext.form.TextField({ width : '185', applyTo : 'xm' }); });
<input id="xm" name="xm" type="text" />
ExtJs其他form表单控件:
Ext.onReady(function() { // 使用表单提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; // 提示显示方式 Ext.override(Ext.form.ComboBox, { onViewClick : function(doFocus) { var index = this.view.getSelectedIndexes()[0], s = this.store, r = s .getAt(index); if (r) { this.onSelect(r, index); } else if (s.getCount() === 0) { this.collapse(); } if (doFocus !== false) { this.el.focus(); } } } ); //把普通html form 表单元素样式 改变为Ext样式 // button var objArray = Ext.DomQuery.select("input[type=submit]"); Ext.each(objArray, function(obj) { var btn = new Ext.Button( { text : obj.value, applyTo : obj, handler : obj.onclick, type : obj.type } ); btn.getEl().replace(Ext.get(obj)); } ); // select or comboBox var objArray = Ext.DomQuery.select("select"); Ext.each(objArray, function(obj) { var btn = new Ext.form.ComboBox( { typeAhead : true, triggerAction : 'all', transform : obj, forceSelection : true } ); } ); // text var objArray = Ext.DomQuery.select("input[type=text]"); Ext.each(objArray, function(obj) { var txtField = new Ext.form.TextField( { applyTo : obj } ); } ); // textarea var objArray = Ext.DomQuery.select("textarea"); Ext.each(objArray, function(obj) { var txtArea = new Ext.form.TextArea( { applyTo : obj } ); } ); // checkbox and radio var objArray = Ext.DomQuery.select("input[type=checkbox]"); Ext.each(objArray, function(obj) { var checkbox = new Ext.form.Checkbox( { applyTo : obj } ); } ); var objArray = Ext.DomQuery.select("input[type=radio]"); Ext.each(objArray, function(obj) { var radio = new Ext.form.Radio( { applyTo : obj } ); } ); } );
发表评论
-
(转)Ext.XTemplate 模板一
2013-08-26 11:38 836原文:http://www.cnblogs.com/lipan ... -
js压缩
2013-01-08 16:19 1133批处理 @echo off SET JS_Folder=E:\ ... -
js获取屏幕大小
2013-01-08 16:07 850alert("网页可见区域宽: "+d ... -
Ext.grid.PivotGrid样式
2012-08-29 17:33 3546Ext.grid.PivotGrid样式 <sty ... -
[转]ext中store.load和store.reload的区别
2012-08-23 16:06 1598作者:silence1214 来源:http://blog.c ... -
Extjs Anchor布局
2012-08-07 10:20 35141.百分比(Percentage)定位 图1 Ext.on ... -
Extjs Tree
2012-08-07 10:20 941Ext.QuickTips.init(); var ... -
Extjs 常用Combo组件
2012-08-06 11:39 11375//数据源本地,下拉列表不分页 var status_st ... -
Extjs 日期控件扩展,只显示月份
2012-08-06 11:38 1926//Extjs 引用 var rq_formPanel ... -
选择下拉列表框选项,打开新窗口
2012-08-06 11:38 864<select name="select2 ... -
javascript校验手机号否为中国移动的手机号
2012-07-31 15:51 1273/* 用于检验手机号的位数以及检验此手机中是否为中国移动的 ... -
javascript身份证号校验函数
2012-07-31 15:51 754function checkIdcard(idcard) ... -
javascript获取给定日期后固定时间段以后的日期
2012-07-31 15:51 1342//格式化日期函数将20120405格式化成2012-04 ... -
JavaScript获取网站根目录地址
2012-07-31 15:51 825function getRootPath(){ ...
相关推荐
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,...
代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, ...
7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext....
ExtJS4.1学习心得及源码 目录 一、安装与配置 二、第一个ExtJS例子 三、表格 四、从XML读取数据表格 ...九、表单Form 十、窗口 十一、消息对话框 十二、ExtJS与Webservice应用 十三、自定义组件 十四、地图
//为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。 Ext.form.Field.prototype.msgTarget=’side’; //提示的方式,枚举值为: qtip-当鼠标移动到控件上面时显示提示; title-在浏览器的标题...
7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext....
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。Extjs也对...
表单面板和面板一样只是作为一个容器出现的,需要我们使用items加入各控件元素来丰富我们的表单面板, defaults:{},此属性提取了items中各组件项的共同属性 对于xtype:在表单面板中非常有用,没有必要每次都用new ...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...
-ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 更绚丽的效果和功能 5. 雀跃吧!超脱了一切的弹出窗口。 ...
它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度可定制的组合下拉框(Combobox)、目录、对话框、表单(Form)以及功能丰富、强大且易用的 API。 GWT-Ext ...
-现在将ExtJS的JavaScript文件拆成如下几个部分:core、foundation、form、grid、menu、tab、tree,页面按需下载其中的一些文件。 -将一个大文件分成几个小文件下载,也充分发挥了浏览器并行下载的特性,为更快的...
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2...
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...
ExtJS 表单域 - 带有集成 TinyMCE 所见即所得编辑器的文本区域 版本:5.0.0 发布日期:22.09.2014 ExtJS 版本:5.0.0 TinyMCE 版本:4.1.5 许可证:LGPL v2.1 或更高版本,Sencha 许可证 作者:Oleg Schildt 电子...