`
lzfying
  • 浏览: 10763 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

ext RowExpander 内 加载组件

阅读更多

ext 的  RowExpander 官方的 只能加在 html,不能加载 ext的 组件对象。由于特殊的需求,需在RowExpander里边加一个form,所以不得不,自定义 RowExpander 组件。不多废话。

 

首先 ,去ext的官方论坛下载一个订制RowExpander.js我传附件把 。 把他替换原来的RowExpander.js 这个文件。

 

然后,这是我写的代码,在RowExpander 中添加了一个FormPanel 。

 

  var expander = new Ext.ux.grid.RowPanelExpander({ 

                createExpandingRowPanelItems: function(record, rowIndex){ 

                        var panelItems = [ 

                              new Ext.FormPanel({ 

        labelWidth: 75, // label settings here cascade unless overridden

        url:'save-form.php',

        frame:true,

        width: 650,

        defaults: {width: 330},

        defaultType: 'textfield',

 

        items: [{

                fieldLabel: 'First Name',

                name: 'first',

                allowBlank:false

            },{

                fieldLabel: 'Last Name',

                name: 'last'

            },{

                fieldLabel: 'Company',

                name: 'company'

            }, {

                fieldLabel: 'Email',

                name: 'email',

                vtype:'email'

            }, new Ext.form.TimeField({

                fieldLabel: 'Time',

                name: 'time',

                minValue: '8:00am',

                maxValue: '6:00pm'

            })

        ],

 

 bbar: [{  

        text: 'Save',  

        id: 'kashdk' ,

handler:function(){  

                      alert(record.get('company'));

                    }  

    },{  

        text: 'Cancel',  

        id: 'aopsduah'  

}]  

                                                                                })

                        ]; 

                        return panelItems; 

                } 

 

        }); 

分享到:
评论

相关推荐

    Ext框架的Grid使用介绍

    7. **插件支持**:EXT JS Grid有多种插件,如CellEditing用于单元格编辑,RowExpander用于行展开显示更多信息,RowBody用于在行内显示额外内容。 8. **响应式设计**:EXT JS的Grid支持响应式布局,自动适应不同屏幕...

    Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    在EXTJS框架中,`Ext.grid.plugin.RowExpander`是一个非常有用的插件,它允许在网格行中展开和折叠额外的信息区域。然而,在EXTJS 4.2版本中,遇到了一个问题,即`RowExpander`插件无法正确触发`collapsebody`和`...

    Ext+JS高级程序设计.rar

    6.3.4 在form中使用Ext.Direct加载数据 185 6.3.5 在form中使用Ext.Direct提交数据 187 6.3.6 使用polling方式进行轮询 189 6.4 本章小结 191 第7章 Store 192 7.1 Store的结构 192 7.2 Ext.data.Field 197 7.3 Ext....

    extgridAPI

    6. **行编辑**:ExtGrid 支持行内编辑,通过`editable`和`editors`配置,可以在选定行的单元格内直接编辑数据。同时,可以监听`edit`事件来处理数据的保存操作。 7. **工具栏**:可以自定义网格顶部或底部的工具栏...

    Extjs中RowExpander控件的默认展开问题示例探讨

    例如,在一个Ext.grid.Panel的配置中,可以添加一个plugins属性,其值为一个RowExpander的实例。 其次,要实现特定行的默认展开,需要在GridPanel加载完成后,通过监听加载完成事件或直接在回调函数中进行操作。在...

    Extjs学习带注释

    - **Ext.onReady 事件**:了解如何使用此事件来确保页面加载完毕后再执行脚本。 - **动态效果**:通过使用 Ext.Fx 类和 Ext.Element 类中的动画函数,可以为界面添加各种动态效果。 #### 六、元素操作与模板 - **...

    ExtJs 中文文档

    - **Ext.onReady 事件**:确保文档加载完成后才执行脚本。 - **Ext.Fx 类**:提供了动画效果的支持,如淡入淡出、滑动等。 - **Ext.Element 类中的动画函数**:可以直接对 DOM 元素应用动画效果。 #### 六、元素...

    Extjs中文教程

    - 通过`Ext.form.FieldSet`组件可以将表单分割成多个部分。 - 每个部分可以有自己的标题和布局方式。 - **表单初始化** - 初始化表单通常涉及设置初始值、绑定事件处理器等。 - 可以在`Ext.form.FormPanel`的`...

    Extjs中文教程2.x

    - **示例**: `new Ext.grid.RowExpander({ bodyTpl: new Ext.XTemplate('<div>{extraInfo}</div>') })`。 **19.4 分组 GridPanel** - **功能**: 按照特定字段对表格数据进行分组。 - **示例**: `grouping: true`。...

    轻松搞定ExtJS.pdf

    - **数据处理**: 使用`Ext.data`包下的类进行数据加载、解析和存储。 - **ComboBox**: 下拉列表组件,常用于提供选项列表供用户选择。 #### 11. Ajax与ComboBox - **Ajax**: 异步通信技术,用于在不重新加载整个...

    轻松搞定ExtJS

    - **Ext.onReady事件**:解释了如何使用`Ext.onReady()`确保页面加载完成后再执行脚本。 - **来自Extjs的问候**:通过一个简单的示例演示了如何在页面上显示动态文本。 - **让界面动起来**:介绍了一些基本的动画...

    ExtJs中文教程

    - Ext.DatePicker组件允许用户选择日期。 #### 十、数据与ComboBox 1. **数据处理概念** - 数据是ExtJs应用程序的核心。 2. **数据代理(DataProxy)** - 用于从服务器获取数据的对象。 3. **数据读取器...

    ExtJS 轻松搞定

    讲解了RowExpander组件的使用,它允许在GridPanel中展开行以显示额外的详细信息。 #### 四、分组GridPanel 介绍了如何使用分组功能,按指定字段对数据进行分类和汇总显示。 ### 结语 《ExtJS 轻松搞定》这本书全面...

    ExtJs GridPanel 操作

    首先,GridPanel是用于显示表格数据的组件,它可以与Ext.data.Store配合使用,Store负责加载和管理数据。GridPanel提供了丰富的功能,如排序、分页、筛选、编辑等。用户可以通过单击列头进行排序,通过工具栏实现...

Global site tag (gtag.js) - Google Analytics