`

ExtJs-FormPanel学习

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="ext/resources/css/ext-all.css" type="text/css"
 rel="stylesheet" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
 Ext.onReady(function() {
  var form1 = new Ext.FormPanel({
   width : 350,
   frame : true,
   renderTo : 'form1',
   title : 'FormPanel',
   bodyStyle : 'padding:5px 5px 0',//制定body元素的CSS样式
   defaults : {//应用在全体组件上的配置项对象,无论组件是由items指定,抑或是通过a……
    width : 200,
    xtype : 'textfield'
   },
   items : [ {//此容器的组件集合
    fieldLabel : "UserName",//文本框标题
    //xtype : 'textfield',//表单文本框
    name : 'user',//后台通过name属性来获得该组件的值
    id : 'user',
    //width : 200
   }, {
    fieldLabel : 'Password',//在组件旁边那里显示的label文本, 默认为""
    //xtype : 'textfield',//用于登记一个xtype
    inputType : 'password',//input的各种类型,其中有radio,check,text(默认),file,password
    name : 'pass',
    id : 'pass',//唯一的组件id(默认为自动分配的id)
    //width : 200
   } ],
   buttons : [ {//面板的按钮组成元素
    text : '确定'
   }, {
    text : '取消',
    handler : function() {
     alert('事件!');
    }
   } ]
  });
 });
</script>
</head>
<body>
 <div id="form1"></div>
</body>
</html>

 主要是一些代码,其中解释了一些属性的用途

 

分享到:
评论

相关推荐

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    extjs-form组件配置参数详解

    ### extjs-form组件配置参数详解 #### 一、Ext.form.Action `Ext.form.Action`是ExtJS中的一个类,用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success*...

    EXTJS-upload.rar_extjs

    1. **表单(Form)组件**:EXTJS 提供了 FormPanel 组件,可以创建包含输入字段的表单,这些字段可以是文本框、选择框、文件上传输入等。文件上传功能通常需要一个`fileField`,这是一个特殊的输入框,允许用户选择...

    extjs中的formPanel以及表单的应用

    FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...

    EXTJS - struts2 查询

    根据提供的文件信息,我们可以分析出该段代码是关于使用EXTJS框架进行struts2查询功能的实现。在本文中,我们将详细解读此代码,并从中提取关键知识点。 ### 1. EXTJS简介 EXTJS是一个基于JavaScript的开源前端...

    ExtJs4.0 表单提交Demo

    ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...

    ExtJS改变默认字体大小的几种方式

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端应用程序。它提供了丰富的组件库,包括按钮、表格、窗口等,使得开发者可以构建出具有复杂交互和美观界面的应用。在使用ExtJS时,有时我们需要根据用户需求或...

    extjs-form:使用 Sencha ExtJS 的简单表单

    通过查看这些文件,你可以更深入地学习如何在实际项目中使用 Sencha ExtJS 创建和管理表单。 总结起来,Sencha ExtJS 提供了强大的表单构建工具,使得创建交互式的、具有验证功能的 Web 表单变得简单。通过理解表单...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    formpanel extjs

    extjs formpanel学习,秘诀,笔记

    extjs 2.2(oozie需要的)

    在使用 ExtJS 2.2 时,了解其主要组件和 API 很重要,例如 GridPanel(用于展示表格数据)、FormPanel(用于创建表单)、TreePanel(用于展示树形结构)以及 Store(用于管理数据模型)。同时,理解 Oozie 的工作流...

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    轻松搞定Extjs 带目录

    ### 知识点概述 #### 1. Extjs概念与目录结构 Extjs是一个基于JavaScript的框架,用于构建交互式的web应用。...通过学习本书,读者能够全面掌握Extjs的各种特性,进而使用Extjs开发出功能强大、交互良好的Web应用。

    extJs中关于formPanel动态添加组件的验证问题

    EXT JS的官方文档和社区资源也提供了丰富的教程和示例,对于学习和解决实际问题非常有用。 总之,EXT JS FormPanel的动态添加组件和验证是一个复杂但重要的主题。通过理解EXT JS的API和验证机制,结合源码分析和...

    FCKeditor结合extjs实例

    标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合,涉及到的主要是两个前端富文本编辑器库:FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时,如何将这两者有效地整合以实现复杂的用户界面...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    在本文中,我们将深入探讨ExtJS 2.0中的FormPanel组件,并通过具体的示例来了解如何使用不同的组件,如checkbox、radio以及htmleditor。首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的...

    Spket - ExtJS提示工具,附规范文件

    - 学习和遵循ExtJS的编码规范,以提高代码可读性和可维护性。 6. **总结** Spket与ExtJS的结合,为JavaScript开发者提供了一个高效、便捷的开发环境。通过Spket的智能提示,开发者可以更专注于设计和实现业务逻辑...

    EXTJS修改颜色实例源码

    通过这个实例,我们可以学习到如何使用 EXTJS 创建带有拖放功能的表单,以及如何结合下拉框和数据存储来实现颜色选择。EXTJS 提供了丰富的组件和事件处理机制,使得开发复杂的 Web 应用变得简单。对于初学者,这个...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    ExtJs 动态添加表单

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用的用户界面。它提供了丰富的组件模型、数据绑定机制以及丰富的API,使得开发者能够创建功能丰富的动态表单。在"动态添加表单"这个主题...

Global site tag (gtag.js) - Google Analytics