一、radiogroup的name和radio的name一致,inputValue为整形 {xtype: ‘radiogroup‘,fieldLabel: ‘是否有效‘,name: ‘status‘,items: [{ name: ‘status‘, boxLabel: ‘有效‘, inputValue: 1, checked: true },{ name: ‘status‘, boxLabel: ‘无效‘, inputValue: 0 }]
}二、radio无name,inputValue为整形{xtype: ‘radiogroup‘,fieldLabel: ‘是否有效‘,name: ‘status‘,items: [{ boxLabel: ‘有效‘, inputValue: 1,...
Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于Ext.form.Field扩展得来的。
Ext.form.Field中定义了输入控件通用的属性和功能函数,这些通用的属性和功能函数大致分为3大类:页面显示样式、控件参数配置和数据有效性检验。我们先来看看表单输入控件可以使用的校验显示方式。默认情况下,这些输入控件会监听blur事件,如果数据校验失败,就会根据msgTarget中的设置显示错误信息。通常,msgTarget会被设置为qtip,...
基本代码:<script>Ext.onReady(function(){Ext.create(‘Ext.form.Panel‘, {title: ‘登录‘,bodyPadding: 5,width: 350,// 将会通过 AJAX 请求提交到此URLurl: ‘${pageContext.request.contextPath}/back/login.do‘,// 表单域 Fields 将被竖直排列, 占满整个宽度frame: true,layout:‘auto‘,// The fieldsdefaultType: ‘textfield‘,items: [{fieldLabel: ‘用户名‘,name: ‘name‘,allowBlank: false,blankText:‘用户名不...
准备工作,布置一个最简单的Form,共5个组件,都为textfield。 1 Ext.onReady(function(){2 Ext.create(‘Ext.form.Panel‘, {3 width: 500,4 title: ‘Layout‘,5 renderTo : ‘form‘,6 items: [{7 xtype : ‘textfield‘,8 fieldLabel : ‘edit1‘,9 name : ‘edit1‘,
10 },{
11 xtype : ‘textfield‘,
12 fieldLa...
我们先来看看前台JS: Ext.onReady(function() { Ext.QuickTips.init();// 浮动信息提示 Ext.form.Field.prototype.msgTarget = ‘side‘;// 设置控件的错误信息显示位置,主要可选的位置有:qtip,title,under,side,[elementId] Ext.BLANK_IMAGE_URL = ‘resources/images/default/s.gif‘;// 替换图片文件地址为本地 var simpleForm = new Ext.FormPanel({ renderTo : document.body, labelAlign : ‘left‘, title : ‘表...
跟我一起学extjs5(22--模块Form的自己定义的设计) 前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些。先来设计一下要完毕的整体目标。 1?能够有多个Form方案,相应于显示、新增、改动、审核、审批等功能; 2?对于上述各种功能能够选择不同的Form方案。比方说改动能够有几个方案,各个操作员能够选择他们感兴趣的Form方案来进行数据的改动。 3?每一个Form...
我在使用extjs的时候对Ext.Ajax的requestexception事件进行处理,统一处理一下请求失败的相应(请求失败弹窗显示相应的404或500).但是今天出现了即使请求错误,但没有任何弹窗的情况,多次尝试后发现在包含filefield的form在submit的时候会出现这个情况(好大的一个坑!试了好久才试出来!)继续测试发现,这种情况下Ext.Ajax的requestcomplete事件中的response参数中的status永远为200即使请求失败,比如响应码为404,500时另外通常在Ext.Aja...
代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create("Ext.form.Panel",{ title:本地hiddenfield实例, renderTo:formDemo, bodyPadding:5 5 5 5, height:100, width:270, frame:true, defaults:{ labelSeparator :": ", labelWidth : 70, width : 200, allowBlank: false, msgTarget : side, labelAlign:left }, items:[{ xtype:textfield, name:name, fieldLabel:name, value:USPCAT.COM },{ xtype:hiddenfield, ...
1. Array indexOf(Object o):Number 方法 remove(Object o):Array 方法 2. Date Javascript对日期时间的操作是不太方便的,而Ext在此基本上加入了比较多的扩展。比较重要的有: add(String interval,Number value):Date 方法 其中interval表示要加入的周期,有效的字符串为 ms--------表示毫秒 s-----------表示秒 mi---------表示分钟 h----------表示小时 d---------表示天 mo--------表示月 y---------表示年 这个方法是通过封装...
1.首先得确定json格式没问题 2.在返回的json中一定得加上success为true,因为只有为true,才会进入success函数 因为刚结束Extjs4,这个错误我调试了半天。
/**
* 提交表单
*/
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",
params: a.params,
waitMsg: "正在提交数据...",
success: function(c, d) {
Ext.ux.Toast.msg("操作信息", "成功信息保存!");
if (a.callback) {
a.callback.call(b, c, d);
}
},
failure: function(c, d) {
Ext...
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: '代码', name: 'FCode', anchor:'100%', id: 'fid' },{ fieldLabel: '名称', name: 'FName', anchor:'100%' // anchor width by percentage },{ xtype: 'textfield', name: 'FID', id: 'FID', hidden: true, hideLabel:true }] }); 只需将textfield的hidden和hideLabel配置为true就可以了。只设置hidden:true时会显示出来一个:的标签。
Ext.panel 可以存放很多元素,最常见的是Ext.form.formPanel对象,也可以用borderlayout布局 下面是我写的一个小例子,顶级容器不是viewport而是tabpanel 代码如下://一个普通的表单 var frm = new Ext.form.FormPanel({ defaultType: textfield, labelAlign: right, title: form1-center, labelWidth: 50, frame: true, width: 120, height:200, region: center, closable: true, //这个属性就可以控制关闭该from items: [{ fieldLa...
一、 Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels:tru表示隐藏标签,默认为false。 labelAlign:标签队齐方式left、right、center,默认为left。 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:"...
1.日期选择框,DateField 日期选择框在日常项目中被广泛应用,一个方便的日期输入机制能够极大的提高用户体验。Extjs的DateField非常友好灵活强大。可以通过如下代码新建一个日期选择框: 代码如下: new Ext.form.DateField({ id: diliveryDate, format: Y年m月d日, maxValue: new Date(), minValue: 1900-01-01, disabledDays: [0, 6], disabledDaysText: 禁止选择该日期, fieldLabel: 选择日期, width:200, showToday:false }) ...