程序中的布局要求一向很高。Extjs中的fieldset是一个很好分组工具,但只能有一列。尝试了很多种组合都无法满足多列,多组合的要求。经过实践终于可以了。一直想写一个新的fieldset组件实现该功能,有空的时候实现它。
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// Fix 2.1 bug
Ext.override(Ext.layout.FormLayout, {
getAnchorViewSize : function(ct, target) {
return (ct.body || ct.el).getStyleSize();
}
});
var cc=Ext.apply({item:[]},{sdf:'sd'});
alert(cc.toString());
new Ext.form.FormPanel({
renderTo : document.body,
title : "Frequency",
border : false,
renderto : Ext.getBody(),
bodyStyle : "padding: 8px; background-color: transparent;",
labelAlign : "left",
labelWidth : 150,
autoScroll : true,
defaultType : "textfield",
items : [{
xtype : "fieldset",
autoHeight : true,
title : "One-Time",
layout : "column",
items : [{
xtype : 'container',
autoEl : {},
columnWidth : 0.5,
layout : 'form',
items : new Ext.form.DateField({
autoCreate : {
tag : "input",
type : "text",
size : 8
},
fieldLabel : "Start Date",
blankText : "Start Date...",
format : "Y-m-d",
value : ""
// ,
// disabled : true
})
}, {
xtype : 'container',
autoEl : {},
columnWidth : 0.5,
layout : 'form',
defaultType : 'textfield',
items : [{
fieldLabel : 'Field 3'
},{
fieldLabel : 'Field 4'
}]
// new Ext.form.DateField({
// autoCreate : {
// tag : "input",
// type : "text",
// size : 8
// },
// fieldLabel : "Start Date",
// blankText : "Start Date...",
// format : "Y-m-d",
// value : "",
// disabled : true
// })
}]
}, {
xtype : "fieldset",
title : "Recurring"
}]
});
});
分享到:
相关推荐
### Extjs FieldSet 两行两列布局解析 ...以上代码展示了如何在Extjs中实现一个两行两列的`FieldSet`布局,并对各个组成部分进行了详细的解析。这种布局方法灵活且强大,适用于多种复杂的UI设计需求。
或者在ExtJS的XML布局中使用: ```xml ``` #### vtype详解 虽然题目中提及了`vtype`,但在提供的内容中并未详细展开。`vtype`在ExtJS中主要用于表单验证,它定义了一组预设的验证规则,如`email`, `url`, `date`...
在ExtJS框架中,3.4.0版本提供了丰富的组件和功能,适合构建复杂的Web应用程序。以下是对标题和描述中提及的几个关键知识点的详细解释: 1. **Ext JS 下载及配置** 在开始使用Ext JS前,你需要从官方网站下载相应...
ExtJS的FieldSet的column列布局,需要的朋友可以参考下。
- 命名空间是Extjs中组织代码的一种方式,用于避免全局变量冲突。 - 使用`Ext.namespace`方法来定义命名空间。 - **Extjs OOP** - Extjs提供了一套面向对象的编程模型,支持类的继承、封装等特性。 - 通过`Ext....
- 布局管理是ExtJS中一个重要特性,用于控制组件的排列方式。 - **常见布局类型**: - **Border区域布局**: 将容器划分为多个区域(顶部、底部、左侧、右侧和中心)。 - **Column列布局**: 按列排列组件。 - **...
学习和理解这些属性对于EXTJS开发者来说至关重要,能够帮助他们创建符合业务需求且用户体验良好的Web应用。通过熟练掌握EXTJS的各种属性,开发者能够更好地定制UI,提高应用程序的互动性和实用性。
1. **EXTJS组件**:EXTJS的核心是它的组件模型,包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面,...
在Extjs开发过程中,`xtype`(扩展类型)是极为重要的一个概念。它实际上是一种类型标识符,用于快速创建特定类型的组件实例。通过使用预定义的`xtype`值,开发者可以方便地构建出各种复杂的用户界面而无需编写大量...
本文将详细介绍ExtJs中的组件类及其对应的功能,帮助读者更好地理解和运用这些组件。 #### 基本组件 1. **`button`** - 对应于`Ext.Button`类,是ExtJs中最基础的按钮组件,用于触发事件或执行某些操作。 2. **`...
学习和掌握"ExtJS项目全集"中的内容,可以帮助开发者熟练地利用ExtJS构建高性能、交互性强的Web应用程序,提高开发效率。然而,需要注意的是,如果涉及到侵权内容,应遵守相关法律法规,尊重并保护知识产权。在使用...
- **FieldSet**: `Ext.form.FieldSet`,表单字段组。 - **Hidden**: `Ext.form.Hidden`,隐藏字段。 - **HtmlEditor**: `Ext.form.HtmlEditor`,HTML编辑器。 - **NumberField**: `Ext.form.NumberField`,数字...
1.3 是否真的需要学习ExtJS 1.4 ExtJS4.0新特性 1.5 ExtJSUI组件基础 1.6 了解一下类似技术 1.7 本章小结 第2章 开始ExtJS之旅 2.1 认识ExtJS的开发包 2.2 也从Helloworld开始 2.3 ExtJS中的基本概念 2.4 ...
`xtype` 是ExtJS中的一个重要概念,它是组件类的简写形式,用于在配置对象中声明组件类型,使得代码更加简洁。理解并掌握ExtJS的各种`xtype`可以帮助开发者快速构建复杂的用户界面。 1. **基本组件**: - `button`...
这些属性是EXTJS中一些常见控件的核心配置,它们帮助开发者定制控件的行为和外观,以满足特定的应用场景需求。EXTJS的强大之处在于其丰富的组件库和灵活的配置选项,使得开发人员可以轻松构建出美观且功能丰富的Web...
总结起来,这个表单布局实例展示了如何在ExtJS中使用`border`布局创建复杂的多区域界面,以及如何利用`FormPanel`和`column`布局来构建表单。通过组合这些布局技术,开发者可以创建出适应性强、易于使用的用户界面,...
1. **布局类**:包括容器布局(Container Layout)、绝对定位布局(Absolute Layout)、手风琴布局(Accordion)、锚点布局(Anchor Layout)、边框布局(Border Layout)、卡片布局(Card Layout)、列布局(Column Layout)、...
此外,`Ext.form.Basic`和`Ext.form.FieldSet`可以帮助我们构建表单和布局。 为了展示文件上传的进度,我们可以使用ExtJS的`ProgressBar`组件,结合Ajax异步上传机制,实时更新进度条的值。每次文件部分上传成功,...
`Ext.form.FieldSet` 是 `ExtJS` 框架中的一个组件,它主要用于组织和分组表单中的字段。FieldSet 提供了一种在界面上以可折叠或展开的方式展示一组相关输入字段的方式,有助于增强用户体验和界面的可读性。以下是对...