`

Extjs-form实例1

    博客分类:
  • ext
EXT 
阅读更多

Extjs-form实例:

1Ext.onReady(function(){

 var form = new Ext.form.FormPanel({

    defaultType: 'textfield',

    labelAlign: 'right',

title: 'form',

labelWidth: 50,  

    frame: true,                          

    width: 220,                           

    items: [{                             

        fieldLabel: '文本框'             

    }],                                    

    buttons: [{                          

        text: '按钮'                       

    }]                                      

});

form.render("form"); 

});

 

2Ext.onReady(function() {

    var form = new Ext.form.FormPanel({

        labelWidth: 55,

        defaultType: 'textfield',

        items: [{

            fieldLabel: 'Send To',

            name: 'to',

            anchor:'100%'  // anchor width by percentage

        },{

            fieldLabel: 'Subject',

            name: 'subject',

            anchor: '100%'  // anchor width by percentage

        }, {

            xtype: 'textarea',

            hideLabel: true,

            name: 'msg',

            anchor: '100% -53'  // anchor width by percentage and height by raw adjustment

        }]

    });

    var window = new Ext.Window({

        title: 'Resize Me',

        width: 500,

        height:300,

        minWidth: 300,

        minHeight: 200,

        layout: 'fit',

        plain:true,

        bodyStyle:'padding:5px;',

        buttonAlign:'center',

        items: form,

        buttons: [{

            text: 'Send'

        },{

            text: 'Cancel'

        }]

    });

    window.show();

});

3var store = new Ext.data.SimpleStore({

    fields: ['abbr', 'state'],

    data : exampleData

});

var combo = new Ext.form.ComboBox({

    store: store,

    displayField:'state',

    typeAhead: true,

    mode: 'local',

    triggerAction: 'all',

    emptyText:'Select a state...',

    selectOnFocus:true,

    applyTo: 'local-states'

});

分享到:
评论
1 楼 haiyangyiba 2010-05-07  
没有详细点的注释,对于我这样的初学者来讲,头疼呀

相关推荐

    extjs-form组件配置参数详解

    - **getForm()**: 返回当前表单实例(`Ext.form.BasicForm`)。 - **load(Object options)**: 加载表单数据。 - **startMonitoring()**: 开始监控表单数据变化。 - **stopMonitoring()**: 停止监控表单数据变化。 ###...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

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

    在“extjs-form:使用 Sencha ExtJS 的简单表单”这个主题中,我们将深入探讨如何利用 ExtJS 创建功能丰富的表单。 首先,让我们了解 ExtJS 表单的基本结构。一个表单通常由若干个字段(Field)组成,每个字段都有...

    EXTJS修改颜色实例源码

    在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...

    ExtJs 实例+ExtJs中文教程(学习extjs必备)

    通过学习这些实例,你可以更好地理解如何在实际项目中应用ExtJs,例如如何创建网格(Grid)、表单(Form)、树形视图(Tree)、面板(Panel)等。实例通常包括完整的HTML、CSS和JavaScript代码,以及详细的解释,...

    extJS 一些简单实例

    在"extJS 一些简单实例"这个主题中,我们将探讨ExtJS的基础知识以及如何通过一些简单的示例来理解和运用它。 首先,ExtJS的核心是它的组件模型。这些组件包括按钮、表格、窗口、菜单等,可以构建出复杂的用户界面。...

    extjs实践大量实例讲解

    ### ExtJS 实践大量实例讲解 #### 概述 ExtJS 是一款用于构建现代 Web 应用的强大框架,它提供了一系列丰富的 UI 组件、数据处理功能以及与后端交互的能力。本文将通过大量的实例来讲解如何使用 ExtJS 来开发高...

    Extjs3.0学习实例

    2. **布局管理**:ExtJS提供了多种布局方式,如Fit布局、Border布局、Form布局、Table布局等,可以灵活地调整组件在容器中的排列和尺寸。 3. **数据绑定**:ExtJS的数据绑定机制允许将UI组件与后台数据源直接关联,...

    ExtJS布局之border实例

    ### ExtJS布局之border实例详解 #### 一、Border布局简介 在ExtJS框架中,`border`布局是一种非常常见的布局方式,它将容器划分为五个区域:north(北)、south(南)、east(东)、west(西)以及center(中心)。...

    Extjs 4 数据包实例

    这个实例"Extjs 4 数据包实例"专注于介绍ExtJS 4中的数据包(Data Package)功能,这是一种高效的数据管理和传输机制。 在ExtJS 4中,数据包主要涉及以下几个核心组件和概念: 1. **Model(模型)**:模型是数据的...

    extjs+mysql实例下载

    1. **ExtJS框架介绍** ExtJS 提供了丰富的UI组件,如表格、表单、树形结构、图表等,使得开发者能够快速构建用户界面。它基于MVC(Model-View-Controller)设计模式,支持模块化开发,易于维护和扩展。此外,ExtJS...

    extjs入门教程实例

    本入门教程实例主要关注ExtJS的基础使用,包括添加、删除、修改和查找功能的实现。 首先,让我们了解一下ExtJS的核心概念。它基于MVC(Model-View-Controller)设计模式,这有助于保持代码结构清晰,易于维护。...

    extjs4 入门基础,form、grid、tree

    `store`配置项用于关联数据存储,通常为`Ext.data.Store`实例。网格还支持排序、分页和行编辑等功能。 **三、树形视图(Tree)** 树形视图用于显示层次结构的数据。在ExtJS中,使用`Ext.tree.Panel`创建树。`...

    ExtJs 实例展示

    包括布局实例,TREE实例,grid实例,form实例,datawindow实例,面向对象实例。

    extjs的一个实例

    利用ext的grid、form等组件实现了对学生信息的增删改查。并用饼状图对学生的男女比例进行了统计。

    一个extjs表格的实例

    extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。

    ssh框架+extjs4.0grid实例

    在这个实例中,SSH框架与ExtJS 4.0结合,提供了强大的前端展示和后端数据处理能力。 Struts2是MVC(Model-View-Controller)架构模式的一种实现,它负责处理HTTP请求,执行业务逻辑,并将结果呈现给用户。Struts2...

    Extjs tree+grid+form+panel 使用实例

    Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例

    FCKeditor结合extjs实例

    2. 在ExtJS组件(如`Ext.form.TextArea`)中替换为FCKeditor的实例,这通常涉及到自定义ExtJS的组件或者在渲染后调用FCKeditor的初始化方法。 3. 配置FCKeditor的设置,如工具栏、样式集等,以适应应用需求。 4. ...

Global site tag (gtag.js) - Google Analytics