`

Ext grid 动态表头的例子

阅读更多
1.Ext.onReady(function(){   
2.//header也就是你应该从后台取回的表头数据,现在写死在了这里   
3.        var headers = [{name: 'company',header:'Company'},{name: 'price',header:'Price'},{name: 'change',header:'change'}]   
4.    var store = new Ext.data.SimpleStore({   
5.        fields: headers   
6.    });   
7.    var columns = [];   
8.    Ext.each(headers,function(h){   
9.        columns.push({   
10.           header:h.header,   
11.           dataIndex:h.name   
12.           });   
13.    });   
14.  
15.    var grid = new Ext.grid.GridPanel({   
16.        store: store,   
17.        columns: columns,   
18.        stripeRows: true,   
19.        height:350,   
20.        width:600,   
21.        title:'Array Grid'  
22.    });   
23.  
24.    grid.render('grid');   
25.});  

 上面从后台取表头的时候应该用同步方法调用后台,而不是用异步,如果用异步的话,会出现你还没拿到后台的表头数据就实例化了grid.
给你个同步请求的方法:

1.var syncRequest = function(url) {   
2.        var conn = Ext.lib.Ajax.getConnectionObject().conn;   
3.        try {   
4.            conn.open("GET", url, false);   
5.            conn.send(null);   
6.        } catch (e) {   
7.            Ext.Msg.alert('info','error');   
8.            return false;   
9.        }   
10.        return Ext.decode(conn.responseText);   
11.    }   
12.//把上面的headers改为   
13.var headers = syncRequest(url);   
14.后台的返回数据为headers的内容就行啦  

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    Ext3.4.0复杂(多行)表头+锁定多列例子

    "Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架,用于构建富互联网应用程序(RIA),它提供了一套完整的组件化开发工具,包括...

    EXT复杂表头+锁定列例子

    标题“EXT复杂表头+锁定列例子”提示我们这里将探讨EXT库在实现这种功能时的应用。 EXT是一个强大的JavaScript库,专为构建桌面级的Web应用而设计。它提供了丰富的组件,包括表格(Grid),用于高效地展示和操作...

    ext gridpanel多层表头分组小计导出excel与Java后台交互全代码

    该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。

    ext 扩展子列表头

    在EXTJS中,列表头通常由`Ext.grid.header.Container`组件定义,而子列表头则可以通过嵌套`Ext.grid.header.Container`来实现。首先,你需要创建一个基本的`Ext.grid.Panel`,然后在它的`columns`配置中定义列。为了...

    extjs动态生成表格,前台+后台

    在我们的例子中,我们将看到如何通过JavaScript代码来动态构建GridPanel。 在前端部分,HTML代码设置了必要的资源引用,包括CSS样式表和ExtJS的JavaScript库。`<div id="grid_div"></div>`这部分是用来放置...

    flexigrid 类似ext grid的JS表格代码

    Flexigrid是一款基于jQuery的开源JavaScript表格插件,它的设计灵感来源于Ext Grid,但相比于Ext Grid,Flexigrid更加轻量级,易于理解和使用。它提供了丰富的功能,如数据分页、排序、搜索以及自定义列宽等,使得在...

    Ext合并单元格

    var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [{ text: 'Name', dataIndex: 'name', renderer: function(value, meta, record) { // 检查并处理合并 if (value === 'SomeValue') { ...

    掏钱学Ext(完整版) 附全部源码

    2.7. 还差:表头菜单,分页,可编辑表格,去服务器读取数据,改变大小,表格间拖拽,树与表格间拖拽。 3. 歌颂吧!只为了树也要学ext。 3.1. 真的,我是为了树,才开始学ext的。 3.2. 传统是先做出一棵树来。 ...

    ExtJs表格点击超链接获取行的值

    在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。为了实现这一功能,我们可以使用`renderer`函数对单元格进行自定义渲染。 **代码示例*...

    去掉gridPanel表头全选框的小例子

    本篇将详细讲解如何去除`gridPanel`表头的全选框,并提供一个小例子供参考。 首先,理解`gridPanel`的结构是关键。`gridPanel`的表头(header)通常包含一个特殊的单元格,该单元格内有一个用于全选/全不选的复选框...

    Extjs 点击复选框在表格中增加相关信息行

    在这个例子中,`$provinceCheckbox01`是一个复选框组,它通过监听`change`事件来响应用户的选择变化。 接下来,定义了一个名为`gridItems`的数组,用于存储表格中的数据。当用户选择或取消选择复选框时,这个数组会...

    Ext JS 4实现带week(星期)的日期选择控件(实战一)

    在本文中,我们将探讨如何在Ext JS 4中创建一个带有星期显示的日期选择控件。在标准的Ext JS库中,虽然提供了日期选择器组件...在这个例子中,我们展示了如何扩展日期选择器以显示星期数,为用户提供更全面的日期信息。

    Extjs4-学习指南

    - **多表头 grid**:展示复杂表头的设置。 - **带搜索的 grid**:集成搜索功能的表格。 - **Grid 多选/全选**:实现表格行的选择功能。 - **可编辑的 grid**:允许用户直接编辑表格中的数据。 - **图片验证码的实现*...

    Extjs4学习指南

    - **多表头Grid**:实现复杂的多级表头,增强数据展示的灵活性。 - **带搜索的Grid**:添加搜索功能,使用户能够快速定位所需信息。 - **Grid多选/全选**:实现对表格行的多选和全选功能,方便批量操作。 - **可编辑...

Global site tag (gtag.js) - Google Analytics