`

[置顶] Extjs4 grid根据model自动生成列

阅读更多
/**
 * model中设置visible属性使该列可生成,设置editor可以传递编辑器,
 * model中设置columnName可传递列名,默认为model的name为列名
 * grid中设置autoGenerateColumns: true,可使自动生成列 
 * author:dys1990@qq.com
 */
Ext.override(Ext.grid.Panel, {
    initComponent: function() {
        this.autoGenerateColumn();
        this.callParent(arguments);
    }
});


Ext.define('Ext.ux.AutoGenerateColumn', {
    autoGenerateColumn: function() {
        var me = this,
            noModel = Ext.isDefined(me.model) === false,
            noAutoGenerate = Ext.isDefined(me.autoGenerateColumns) === false;

        if (noModel && noAutoGenerate) {
            return;
        }

        if (me.autoGenerateColumns === true) {
            if(Ext.isString(me.model)) {
                me.model = Ext.ModelManager.getModel(me.model);
            }

            var modelFields = me.model.prototype.fields;
            me.columns = new Array();

            // Adding columns to grid
            for (var i=0; i < modelFields.length; i++) {
                var modelField = modelFields.items[i];
                var isVisible = (Ext.isDefined(modelField.visible) && (modelField.visible === true));
				var columnName;
                if (isVisible) {
                	columnName=modelField.name;
                	if(Ext.isDefined(modelField.columnName)){
                		columnName=modelField.columnName;
                	}
                    var column = {
                        text: columnName,
                        dataIndex: modelField.name
                    };

                    if (modelField.type.type === 'floatOrString') {
                        column.renderer = Ext.util.Format.numberOrString;
                    }
					if(Ext.isDefined(modelField.editor)){
						column.editor=modelField.editor;
					}
                    me.columns.push(column);
                }
            }
        }

        if (me.columns.length == 0) {
            Ext.Error.raise('No fields declared in ' + me.model.$className + ' with property visible. Columns will not be created!');
        }
    }
});

Ext.grid.Panel.mixin('AutoGenerateColumn', Ext.ux.AutoGenerateColumn);

13
10
分享到:
评论

相关推荐

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    ExtJs动态grid的生成

    - 动态Grid常用于数据分析、报表生成、管理界面等场景,可以根据用户选择或权限动态展示不同的数据列和功能。 通过以上讲解,我们可以看出在ExtJS中动态生成Grid涉及到许多关键技术和API。实际开发中,理解并掌握...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    Extjs4 Grid分页与自动刷新

    ### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...

    ExtJS grid过滤操作

    - **Filter Model**:ExtJS Grid中的过滤功能基于Filter Model。每个列都可以有自己的过滤器,用户可以根据需要定义过滤条件。 - **Filter Types**:多种内置过滤器类型,如文本、数字、日期等,满足不同数据类型...

    EXTJS4 表格GRID示例

    EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例

    Extjs4 grid 导出为Excel

    Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 &lt;link href='...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    extjs4 grid(含form)

    extjs4 grid 包括form js代码

    ExtJs代码自动生成

    有一些工具和库可以帮助开发者自动完成上述过程,如Sencha Architect、ExtJS的Model和Store生成器等。这些工具可以大大简化开发流程,减少手动编写代码的时间。 总结,ExtJS代码自动生成是提高开发效率的重要手段...

    extjs grid数据导出excel文件

    这包括将数据转换为二维数组,每一行代表一个Grid记录,每一列对应记录的一个字段。 4. **创建并写入工作簿**:利用SheetJS创建一个新的工作簿对象,然后将转换后的数据添加到新的工作表中。 5. **生成Excel文件**...

    extjs4 ComboBox 点击下拉框 出现grid效果

    Grid的配置可以包括列模型(column model)、存储模型(store)以及视图配置等。 例如: ```javascript var comboBox = Ext.create('Ext.form.ComboBox', { ... listeners: { expand: function(comboBox) { ...

    extjs动态生成model、store、panel

    extjs动态生成model、store、panel;sql拼接等多种技术难点

    Extjs动态GRID

    EXTJS Grid的列宽度可以设置为自动或固定,也可以根据窗口大小或内容自动调整。使用`flex`属性,可以指定列的相对宽度,使得Grid在不同屏幕尺寸下保持良好的布局。 5. 表头菜单: EXTJS Grid支持自定义表头菜单,...

    extjs4打印grid插件

    总的来说,"extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具,它为Grid Panel提供了方便的打印功能,极大地丰富了用户体验,特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件,开发者可以更好地...

    grid动态生成列参考!

    本文将深入探讨如何在ExtJS框架下实现GridPanel的动态列生成,这对于那些需要根据用户操作或数据源变化实时调整列布局的应用场景至关重要。 ### ExtJS GridPanel动态列生成详解 #### 一、背景理解 在ExtJS中,`...

    extjs4Grid和jqGrid对比.doc

    ### ExtJs 4 Grid 与 jqGrid 对比分析 #### 一、数据展示对比 在数据展示方面,ExtJs 4 Grid 和 jqGrid 都采用了 JSON 格式的数据交互方式,但两者在实现机制上存在一定的差异。 1. **ExtJs 4 Grid**: - **耦合...

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    在使用ExtJS4开发一个grid的时候,经常会遇到需要对grid的列进行动态的显示和隐藏操作,以适应不同的显示需求。ExtJS4中的gridpanel组件提供了一些内置的方法来控制列的可见性,但有时候需要一个更直观的方式来实现...

    extjs4如何自动生成掌握grid的列显示、隐蔽的checkbox_.docx

    ### ExtJS4自动生成Grid列显示/隐藏Checkbox的实现方法 #### 一、问题背景及需求分析 在ExtJS4的应用开发过程中,有时会遇到这样的需求:需要为GridPanel中的每一列提供一个Checkbox来控制其是否显示。尽管ExtJS4...

    ExtJS 使用grid显示数据

    3. **列模型(Column Model)**:定义Grid的列布局,`Ext.grid.ColumnModel`(在新版本中是`Ext.grid.header.Container`和`Ext.grid.column.Column`),设置每列的标题、数据绑定、宽度等属性。 4. **Grid Panel**...

Global site tag (gtag.js) - Google Analytics