慢慢开始接触Ext,防公司让我搞这个,先做点准备,准备多少是多少.在网上搜了很多例子,无一例外的都是在items[]数组里去定义一些新的对象,就象下面代码的上部分一样,难以阅读,看着那叫一个累,尤其是初学者,都不知道items里到底是什么对象,照着敲这些代码还容易出错,查了查ext文档,发现组件类都有add方法,于是改了一个别人的例子,觉着好理解多了,并且便于调试多了.就在下面代码的后一部分,相信这种写法应该是搞面象对象编程人员比较喜欢的一种方式
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
//定义一个FormPanel
var fsf = new Ext.form.FormPanel({
title:"FormPanel2 ",
url:'',
frame:true,
width:350,
bodyStyle:'padding:5px 5px 0',
//height:120,
//defaultType:'textfield',
items:[
//定义两个FieldSet
{
xtype:'fieldset',
checkboxToggle:true,
title:'User Information',
autoHeight:true,
defaultType:'textfield',
//defaults: {width: 210},
collapsed:true,
items :[
{fieldLabel: 'First Name',name: 'first', allowBlank:false},
{fieldLabel: 'Last Name',name: 'last'},
{fieldLabel: 'Company',name: 'company'},
{fieldLabel: 'Email',name: 'email', vtype:'email'}
]
},
{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
//defaults: {width: 210},
defaultType: 'textfield',
items :[
{fieldLabel: 'Home',name: 'home',value: '(888) 555-1212'},
{fieldLabel: 'Business',name: 'business'},
{fieldLabel: 'Mobile',name: 'mobile'},
{fieldLabel: 'Fax',name: 'fax'}
]
}
]
});
//new一个FieldSet
var fieldset = new Ext.form.FieldSet({
title: 'Phone Number',
collapsible: true,
autoHeight:true,
//defaults: {width: 210},
defaultType: 'textfield'
});
//new一个TextFiled,
var textFiled1 = new Ext.form.TextField();
textFiled1.fieldLabel="Home2";
textFiled1.name="home";
textFiled1.value="(888) 555-1212";
//textFiled添加到FieldSet
fieldset.add(textFiled1);
//Fieldset添加到FormPanel
fsf.add(fieldset);
fsf.render(document.body);
});
</script>
</head>
<body>
</body>
</html>
虽然这样看起来js代码不太简洁,但比较好维护,不太容易出错
分享到：
相关推荐
### Ext的FormPanel组件 #### 综述 `FormPanel`是Ext JS框架中的一个重要组件，主要用于构建复杂的表单界面。它提供了丰富的功能，如数据验证、数据提交以及灵活的布局控制等，使得开发者能够轻松地创建出既美观又...
总结来说，“EXT3.0 JSP上传”涉及到EXT3.0的FormPanel和FileUploadField组件来构建前端文件选择和上传界面，使用EXT3.0的Ajax请求功能发送文件数据到服务器。在服务器端，JSP接收文件数据并将其保存。整个过程需要...
Ext的formpanel table布局实例，有效解决了页面resize时列宽不跟随改变的问题，即列宽的自适应宽度
<ext:FormPanel id="loginForm" layout="form"> <ext:TextField id="usernameField" fieldLabel="用户名" /> <ext:TextField id="passwordField" fieldLabel="密码" inputType="password" /> <ext:Button text=...
在这个例子中，通过`new Ext.FormPanel`来创建了一个表单面板，并设置了一些关键属性： - `frame`: 设置为`true`，表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...
首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框，可以用来让用户选择多个选项。在示例中，...
这些代码通常包含创建Ext JS组件（如TabPanel、FormPanel等）的逻辑。 3. **添加额外的初始化代码**：根据项目需求，可能需要添加一些额外的代码来初始化组件或设置特定的行为。在示例中，可以看到`MyTabsUi`组件被...
在EXTJS框架中，`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法，它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...
【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库，主要用于构建富客户端Web应用程序。在EXTJS中，Ext.AJAX和Ext.FormPanel是两个核心组件，它们分别用于异步与服务器进行数据交互和...
在Ext JS中，`Ext.form_load`涉及到的主要知识点是FormPanel的数据加载机制，这包括了对FormPanel的form对象、BasicForm、doAction方法、Ext.form.Action对象以及JsonReader的使用。以下是对这些概念的详细解释： 1...
5. **Ajax通信**：EXT3.0使用Ajax进行异步通信，这意味着在用户交互后，可以在不刷新整个页面的情况下向服务器发送和接收数据。在登录场景中，Ajax请求会携带用户名和密码，服务器端会检查这些信息的正确性。 6. **...
1. **Ext FormPanel**: FormPanel是Ext中的一个组件，用于展示和处理表单数据。它包含了一系列的Field组件，如TextField、ComboBox、FileField等。在文件上传场景中，我们需要配置FormPanel以支持文件提交，这通常...
【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件，它允许用户输入、编辑和验证数据。在上述代码中，`sampleFormPanel`是一个FormPanel实例，包含了多个配置属性，用于定制表单的行为和...
allowBlank: false, // 不允许为空 validator: function(value) { return value.length > 3 ? '有效用户名' : '用户名至少需要4个字符'; } }] ``` 除了本地验证，FormPanel 还支持远程验证，即通过Ajax请求将...
在EXT JS这个强大的JavaScript框架中，FormPanel是用于创建表单的重要组件，它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式，还支持各种表单元素，如文本框、复选框、下拉...
1. **组件系统**：EXT的核心在于其强大的组件模型，这些组件可以组合成复杂的用户界面。每个组件都有自己的属性、方法和事件，可以通过配置选项进行定制。 2. **数据绑定**：EXT支持双向数据绑定，允许视图和模型...
1. `form`：`Ext.FormPanel`是EXT JS中的表单面板，它是一个容器，可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`：`Ext.form.Checkbox`是用于创建复选...
- **Form Components**: 用于构建表单的组件，如`Ext.FormPanel`，`Ext.form.Checkbox`，`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件，如`Ext.chart.Chart`，`Ext.chart.BarChart`，`Ext....