form.js
Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
'*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'simpleForm',
url: 'save-form.php',
frame: true,
title: 'Simple Form',
bodyPadding: '5 5 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
simple.render(document.body);
/*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
var fsf = Ext.widget({
xtype: 'form',
id: 'fieldSetForm',
collapsible: true,
url: 'save-form.php',
frame: true,
title: 'Simple Form with FieldSets',
bodyPadding: '5 5 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaults: {
anchor: '100%'
},
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
defaultType: 'textfield',
collapsed: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email'
}]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
fsf.render(document.body);
/*
* ================ Form 3 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
var top = Ext.widget({
xtype: 'form',
id: 'multiColumnForm',
collapsible: true,
frame: true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyPadding: '5 5 0',
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
items:[{
xtype: 'container',
flex: 1,
layout: 'anchor',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
anchor:'95%',
value: 'Don'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
anchor:'100%',
value: 'Griffin'
},{
xtype:'textfield',
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email',
anchor:'100%'
}]
}]
}, {
xtype: 'htmleditor',
name: 'bio',
fieldLabel: 'Biography',
height: 200,
anchor: '100%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
/*
* ================ Form 4 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
var tabs = Ext.widget({
xtype: 'form',
id: 'tabForm',
width: 350,
border: false,
bodyBorder: false,
fieldDefaults: {
labelWidth: 75,
msgTarget: 'side'
},
items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{
bodyPadding: 10,
layout: 'anchor'
},
items:[{
title:'Personal Details',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
name: 'first',
afterLabelTextTpl: required,
allowBlank:false,
value: 'Ed'
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
value: 'Spencer'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
},
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tabs.render(document.body);
/*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
var tab2 = Ext.widget({
title: 'Inner Tabs',
xtype: 'form',
id: 'innerTabsForm',
collapsible: true,
bodyPadding: 5,
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
items: [{
xtype: 'container',
layout:'hbox',
items:[{
xtype: 'container',
flex: 1,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
anchor:'95%'
}, {
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
anchor:'95%'
},{
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{
bodyPadding: 10
},
items:[{
title:'Personal Details',
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jamie'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Avins'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls: 'x-plain',
title: 'Biography',
layout: 'fit',
items: {
xtype: 'htmleditor',
name: 'bio2',
fieldLabel: 'Biography'
}
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});
Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
'*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'simpleForm',
url: 'save-form.php',
frame: true,
title: 'Simple Form',
bodyPadding: '5 5 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
simple.render(document.body);
/*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
var fsf = Ext.widget({
xtype: 'form',
id: 'fieldSetForm',
collapsible: true,
url: 'save-form.php',
frame: true,
title: 'Simple Form with FieldSets',
bodyPadding: '5 5 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaults: {
anchor: '100%'
},
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
defaultType: 'textfield',
collapsed: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email'
}]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
fsf.render(document.body);
/*
* ================ Form 3 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
var top = Ext.widget({
xtype: 'form',
id: 'multiColumnForm',
collapsible: true,
frame: true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyPadding: '5 5 0',
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
items:[{
xtype: 'container',
flex: 1,
layout: 'anchor',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
anchor:'95%',
value: 'Don'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
anchor:'100%',
value: 'Griffin'
},{
xtype:'textfield',
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email',
anchor:'100%'
}]
}]
}, {
xtype: 'htmleditor',
name: 'bio',
fieldLabel: 'Biography',
height: 200,
anchor: '100%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
/*
* ================ Form 4 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
var tabs = Ext.widget({
xtype: 'form',
id: 'tabForm',
width: 350,
border: false,
bodyBorder: false,
fieldDefaults: {
labelWidth: 75,
msgTarget: 'side'
},
items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{
bodyPadding: 10,
layout: 'anchor'
},
items:[{
title:'Personal Details',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
name: 'first',
afterLabelTextTpl: required,
allowBlank:false,
value: 'Ed'
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
value: 'Spencer'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
},
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tabs.render(document.body);
/*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
var tab2 = Ext.widget({
title: 'Inner Tabs',
xtype: 'form',
id: 'innerTabsForm',
collapsible: true,
bodyPadding: 5,
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
items: [{
xtype: 'container',
layout:'hbox',
items:[{
xtype: 'container',
flex: 1,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
anchor:'95%'
}, {
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
anchor:'95%'
},{
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{
bodyPadding: 10
},
items:[{
title:'Personal Details',
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jamie'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Avins'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls: 'x-plain',
title: 'Biography',
layout: 'fit',
items: {
xtype: 'htmleditor',
name: 'bio2',
fieldLabel: 'Biography'
}
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});
发表评论
-
extjs4.1几种布局方式
2013-02-18 15:32 886http://blog.csdn.net/yunji3344/ ... -
extjs4.1 几种绘图
2013-02-18 15:06 934draw.js Ext.onReady(function( ... -
extjs4.2 MessageBox Dialogs
2013-02-02 11:27 2186<head> <meta http- ... -
extjs4.2 login,window
2013-02-01 17:38 1784Login: <!DOCTYPE HTML PUBLI ... -
JS学习,教程
2012-10-11 21:57 636JS 学习中。。。。
相关推荐
同时,EXTjs4.2提供了强大的布局管理器,支持多种布局模式,如fit、form、border等,使界面布局更加灵活。 在数据处理方面,EXTjs4.2加强了数据绑定和模型(Model)的概念,允许开发者方便地处理和展示后台数据。它...
ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一套完整的组件库,包括数据管理、图表、表格、菜单、工具栏等,使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...
EXTJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。在这个场景中,我们关注的是在EXTJS的Combobox(下拉框)组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项,但在大...
综上所述,`ExtJs4.2 下拉框树`的实现涉及到了组件扩展、树形数据处理、界面布局和交互设计等多个方面,通过对`TreePicker.js`的修改,开发者成功地克服了原生框架的限制,提供了更符合需求的下拉树功能。
图片上传功能通常借助于ExtJS的表单组件(`Ext.form.Panel`)和上传字段(`Ext.form.field.File`)。在ExtJS 4.2中,上传组件可能需要配合第三方插件,如SWFUpload或jQuery File Upload,以实现浏览器兼容性和异步...
在ExtJS 4.2中实现时间选择插件,首先需要理解Ext.form.field.Time类,这是ExtJS提供的用于创建时间选择字段的基础组件。这个组件提供了基本的时间输入功能,但默认情况下可能不支持秒的选择。为了精确到时分秒,...
### Extjs4.2 日期控件扩展带时分秒:深入解析与应用 #### 一、概述 在Web开发中,特别是在使用ExtJS这样的框架进行界面构建时,日期和时间的选择器是不可或缺的一部分。ExtJS 4.2提供了一个强大的日期控件,但是...
"ExtJS 4.2 动态生成Toolbar" 在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用...
总之,"ExtJs4.2.1年月日时分秒、时分秒控件"是关于使用ExtJS框架创建日期和时间选择功能的。通过理解和利用提供的组件、配置以及测试样例,开发者可以轻松地在Web应用中集成这些控件,提升用户体验。
ExtJS的`Ext.form.Panel`可以用来创建这样的面板,展示和处理用户的输入。 5. **保存与加载**:工作流设计需要有保存和加载的功能。ExtJS的Ajax接口和JSON数据模型可以帮助实现这个功能,将设计的流程图保存为JSON...
- **版本号**:4.2.6.1811 - Ext JS 4.2.6是该框架的一个稳定版本,对先前版本进行了错误修复和性能优化。它支持现代浏览器,包括IE8+,并且提供了一套完整的组件库,如表格、面板、窗口、树形视图等,以及数据...
它提供了丰富的组件系统,包括Panel、Grid、Form等,而Panel是EXTJS中的核心组件之一,可以视为一个可自定义的容器,可以包含其他组件。 在传统的EXTJS中,`viewport`是一个特殊的布局,用于将整个页面作为其渲染...
在ExtJS中,我们可以创建一个`Ext.form.Panel`,并在其中包含一个`Ext.form.FileField`组件,该组件支持多选文件,从而实现批量上传的功能。配置`allowMultiple`属性为`true`,即可启用多选文件功能: ```...
这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下是对这段代码的详细解释: 1. **组件定义**: 组件名为`Ext.ux.comboboxtree`,它扩展了`Ext.form.field.Picker`,...
5. **创建组件**:EXTJS提供了大量的预定义组件,如面板(Panel)、表格(Grid)、树形控件(Tree)、表单(Form)等。在`app`目录下创建对应的类文件,如`views/MyPanel.js`,定义组件的配置和行为。 6. **数据...
- **Form Panel**:表单组件,包含多个输入字段,支持数据验证。 - **Tab Panel**:标签页组件,可以在不同的标签页之间切换内容。 - **Window**:弹出窗口组件,常用于显示额外信息或收集用户输入。 - **Tree Panel...
首先,ExtJS中的`Ext.form.field.Text`组件可以作为搜索输入框,它提供了基本的用户输入事件监听,如`keyup`或`change`,这些事件可以触发搜索过滤操作。当用户在搜索框中输入文字时,可以通过监听这些事件来实时...
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide ...注明:在Extjs4.1上是可以使用的,Extjs4.2部分会有问题。
在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,...