`
xiangxingchina
  • 浏览: 526964 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext.window中放入gridPanel和formPanel

    博客分类：
  • ext
 
阅读更多

 

代码如下：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

< html >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">

    < title > Hello World Window Example </ title >

    < link rel = "stylesheet" type = "text/css" href = "../../resources/css/ext-all.css" />

 

 

 

     < script type = "text/javascript" src = "../../adapter/ext/ext-base.js"></ script >

 

   

 

    < script type = "text/javascript" src = "../../ext-all.js"></ script >

 

    < script language = "javascript" >

   

      

Ext . onReady ( function (){

    var win ;

    var button = Ext . get ( 'show-btn' );

   

      var data = [[ '1' , 'male' , 'name1' , 'descn1' ], [ '2' , 'female' , 'name2' , 'descn2' ], [ '3' , 'male' , 'name3' , 'descn3' ], [ '4' , 'female' , 'name4' , 'descn4' ], [ '5' , 'male' , 'name5' , 'descn5' ]];

               

                var ds = new Ext . data . Store ({

                    proxy : new Ext . data . MemoryProxy ( data ),

                    reader : new Ext . data . ArrayReader ({}, [{

                        name : 'id'

                    }, {

                        name : 'sex'

                    }, {

                        name : 'name'

                    }, {

                        name : 'descn'

                    }])

                });

               

               

                ds . load ();

                var cm = new Ext . grid . ColumnModel ([{

                    header : ' 序号 ' ,

                    dataIndex : 'id'

                }, {

                    header : ' 性别 ' ,

                    dataIndex : 'sex' ,

                    renderer : function ( value ){

                        if ( value == 'male' ) {

                            return "<span style='color:red;font-weight:bold;'> 男 <//span>" ;

                        }

                        else {

                            return "<span style='color:green;font-weight:bold;'> 女 <//span>" ;

                        }

                    }

                }, {

                    header : ' 名称 ' ,

                    dataIndex : 'name'

                }, {

                    header : ' 描述 ' ,

                    dataIndex : 'descn'

                }]);

               

               

               

                var grid = new Ext . grid . GridPanel ({

                  //  el:'hello-grid',

                   region : 'north' ,

                    store : ds ,

                    cm : cm ,

                    width : 300 ,

                    frame : true ,

                    height : 200

               

                });

         grid.on('rowclick',onRowDbClick);
          

 function onRowDbClick(grid,rowIndex,e)
  {
       var row = grid.store.data.items[rowIndex];
        formPanel . form . findField ( "name" ). setValue ( row.data["name"] );

  }    

 

     var formPanel = new Ext . form . FormPanel ({

 

               

                    labelWidth : 70 ,

                    labelAlign : 'right' ,

                    height : 300 ,

                  //  el:'hello-form',

                   region : 'center' ,//定位

                    items : [{

                        xtype : 'fieldset' ,

                        title : ' 基本信息 ' ,

                        autoHeight : true ,

                        items : [{

                            layout : 'column' ,

                            border : false ,

                            defaults : {

                                border : false

                            },

                            items : [{

                                columnWidth : .5 ,

                                layout : 'form' ,

                                defaultType : 'textfield' ,

                        

                                defaults : {

                                    width : 120

                                },

                                items : [{

                                    xtype : "hidden" ,

                                    name : "id"

                                }, {

                                    fieldLabel : ' 用户名 ' ,

                                    name : 'name' ,

                                    width : 120

                                }]

                            }, {

                                columnWidth : .5 ,

                                layout : 'form' ,

                                defaultType : 'textfield' ,

                                defaults : {

                                    width : 104

                                },

                                items : [{

                                    inputType : 'password' ,

                                    fieldLabel : ' 密码 ' ,

                                    name : 'password'

                                }]

                            }]

                        }, {

                            layout : 'form' ,

                           border : false ,

                            defaults : {

                                border : false

                            },

                            defaultType : 'textfield' ,

                            items : [{

                                width : 300 ,

                                name : "email" ,

                                fieldLabel : ' 电子邮箱 '

                            }]

                        }]

                    }, {

                        xtype : 'fieldset' ,

                        title : ' 备注信息 ' ,

                        autoHeight : true ,

                        items : [{

                            xtype : "textarea" ,

                            width : 380 ,

                            height : 80 ,

                            name : "remark" ,

                            hideLabel : true

                        }]

                    }]

                });

    button . on ( 'click' , function (){

        // create the window on the first click and reuse on subsequent clicks

        if (! win ){

            win = new Ext . Window ({

             //   el:'hello-win',

              //  layout:'fit',

             layout : 'border' ,

                width : 600 ,

                height : 500 ,

                closeAction : 'hide' , // 关闭窗口时渐渐缩小

                plain : true ,

               

                items :[ formPanel , grid ],

 

                buttons : [{

                    text : 'Submit' ,

                    disabled : true

                },{

                    text : 'Close' ,

                    handler : function (){

                        win . hide ();

                    }

                }]

            });

        }

        win . show ( this );

    });

});

 

    </ script >

 

<!-- Common Styles for the examples -->

< link rel = "stylesheet" type = "text/css" href = "../examples.css" />

 

    < style type = "text/css">

    .x-panel-body p {

        margin : 10px ;

        font-size : 12px ;

    }

    </ style >

</ head >

< body >

< script type = "text/javascript" src = "../examples.js"></ script > <!-- EXAMPLES -->

 

 

< input type = "button" id = "show-btn" value = "Hello World" />< br />< br />

<  

< div id = "hello-win" class = "">

    < div id = "hello-grid"></ div >

    < div id = "hello-form" >

     

    </ div >

</ div >

</ body >

</ html >

分享到：
| Myeclipse下ext插件spket的配置和安装
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext组件描述，各个组件含义

    **2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**：Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**：展示结构化数据，支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...

    Ext面向对象开发实践代码第1/2页

    在本文中，我们将深入探讨如何使用ExtJS进行面向对象的开发，特别关注如何构建GridPanel、FormPanel和Window组件。作者通过一个简单的示例程序，展示了如何在学习Ext的过程中实践面向对象编程，以及如何实现数据展示...

    Ext-JS框架中文文档

    - **子类**: 如Window窗口、FormPanel等。 12. **表单组件** - **表单布局**: 定义表单的布局结构。 - **表单初始化**: 设置表单的初始状态。 13. **表格组件——GridPanel** - **表格面板**: 一种高级的表格...

    Ext3.0 api帮助文档

    - **Ext.form.FormPanel**: 创建表单的容器，支持多种表单元素和验证。 - **Ext.form.Field**: 表单字段类，如文本框、选择框、日期选择器等。 - **Ext.form.BasicForm**: 提供表单的提交和数据验证功能。 7. **...

    Extjs2.0中文文档

    文档中会介绍Panel的使用以及其子类Window和FormPanel的特定功能。 12. **表单组件**：表单是Web应用中不可或缺的一部分，文档会介绍Ext.js提供的各种表单组件以及它们的配置选项和验证功能。 13. **悬停提示与...

    Extjs实用教程

    - **FormPanel**: `Ext.FormPanel`，表单容器。 - **Checkbox**: `Ext.form.Checkbox`，复选框。 - **ComboBox**: `Ext.form.ComboBox`，下拉选择框。 - **DateField**: `Ext.form.DateField`，日期输入框。 - ...

    老师整理的extjs学习笔记

    formPanel.getForm().submit({ url: '/submit.php', success: function(form, action) { // 成功回调 }, failure: function(form, action) { // 失败回调 } }); ``` #### 七、Ext.data.Store -- ExtJS 的...

    extJs xtype 类型

    10. **`grid`:** 表格组件，用于展示和编辑表格数据，通过`Ext.grid.GridPanel`类实现。 11. **`editorgrid`:** 可编辑的表格组件，允许用户直接在表格中编辑数据，通过`Ext.grid.EditorGridPanel`类实现。 12. **...

    ExtJs xtype一览

    - **`form` (Ext.FormPanel/Ext.form.FormPanel)**: 表单面板组件，用于创建包含多个表单元素的表单。 - **`checkbox` (Ext.form.Checkbox)**: 多选框组件，用于实现多选功能。 - **`combo` (Ext.form.ComboBox)**: ...

    ExtJs组件类的对应表

    1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`，表单面板组件，用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`，多选框组件，用于创建多选输入。 3. **`combo`** - `Ext.form....

    ext2.0 详解和API

    1. **组件化设计**：EXT2.0引入了一套完整的组件系统，如表格（Grid）、面板（Panel）、窗口（Window）和菜单（Menu），这些组件可以自由组合，形成复杂的用户界面。 2. **数据绑定**：EXT2.0实现了模型-视图-控制...

    EXT和JAVA例子

    EXT JS提供了丰富的UI组件，如GridPanel（表格），FormPanel（表单），Window（弹出窗口），TabPanel（选项卡）等，这些都是构建用户界面的基础。开发者可以通过配置对象定义组件的属性，如大小、颜色、样式等，并...

    基于EXTJS简明教程2.0的笔记

    15. **Ext.form.FormPanel** 用于创建表单，可以配置`labelAlign`（标签对齐方式）和`defaultType`（默认组件类型），表单组件在`items:[]`中定义，每个组件有自己的属性如`fieldLabel`和`name`。 16. **Accordion...

    ExtJs 中文文档

    - **Ext.apply() 和 Ext.applyIf()**：这两个函数用于合并对象。`Ext.apply()` 会覆盖目标对象的属性，而 `Ext.applyIf()` 只会在目标对象没有该属性时添加。 #### 四、消息框 - **提示框**：用于显示简单的消息...

    Ext.NET.WebForms.Pro.2.5.1.Examples.Explorer

    描述中提到"EXT的所有控件以及控件的用法及代码"，这暗示了压缩包内可能包含每个EXT控件的演示、文档和源代码，帮助开发者理解和学习EXT控件的完整功能和实现方式。EXT控件包括但不限于以下几种： 1. GridPanel：...

    轻松搞定ExtJS

    - **Ext.Window类**：详细说明了Ext.Window类的各种属性和方法。 - **实现Window的最小化功能**：讲解了如何为Window添加最小化功能。 #### 第十五章：Panel的子类——FormPanel - **无处不在的表单**：强调了表单...

    ExtJs中文教程

    - `Ext.apply()`用于合并对象，`Ext.applyIf()`则是在目标对象中不存在属性时才进行合并。 #### 四、消息框使用 1. **消息框概述** - 消息框是用于向用户展示信息或请求输入的一种方式。 2. **提示框** - 最基本...

    extjs3.0例子

    在实践中，EXTJS 3.0的例子可能包括创建一个简单的窗口应用，展示如何使用GridPanel加载和显示数据，或者构建一个包含多种表单元素的交互式表单。通过这些例子，开发者可以快速掌握EXTJS的基本用法，并逐步提升到更...

    ext3.0所有控件演示代码

    EXT3.0是一款强大的JavaScript库，专用于构建富客户端应用程序，尤其在Web应用开发中有着广泛的应用。这个压缩包文件提供了EXT3.0中的几乎全部控件的演示代码，覆盖了表格、表单、分页工具栏以及图标等多个重要组件...

    ExtJs + api + 笔记 + 完整包

    "23-Ext中的对话框.doc"文件讲解了对话框（Dialog）组件的使用，包括模态窗口和非模态窗口。对话框在Web应用中常用于弹出确认、提示或设置信息，ExtJs提供了丰富的选项来定制对话框的外观和行为。 "26-表格控件...

Magicbox
Global site tag (gtag.js) - Google Analytics