`
denghua10
  • 浏览: 73436 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Extjs4 Grid分页与自动刷新

 
阅读更多
1.布局组合
var viewport = Ext.create('Ext.Viewport', {
            id: 'border-example',
            layout: 'border',
            items: [
            Ext.create('Ext.Component', {
                region: 'north',
                height: 60, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<p><img src="../image/north.png"></img></p>'
                }
            }), {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                contentEl: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible:true,
                collapsed: true,
                title: 'South',
                margins: '0 0 0 0'
            },tabs]
}]
2.创建可增加的tabs
    //中间部分
    var tabs= Ext.create('Ext.tab.Panel', {
    id:'centerpanel',
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    contentEl: 'center1',
title: '传感中心',
                    closable: true,
                    autoScroll: true
}, {
                    contentEl: 'center2',
                    title: '公司简介',
                    autoScroll: true
                }]  
});
3.在tabs上增加子项
function addTab (closable,s) {
       var flags="#Tab"+index;//注意#号部分
       var user = tabs.child(flags);
           if(user){//去除重复加载
       user.tab.show();  
tabs.setActiveTab(user);
      }


else if(index==32){//天气灾害预警
tabs.add({
            title: s,
            iconCls: 'tabs',
            itemId:'#Tab' + index,
            html:'<iframe src="http://www.baidu.com/" width="100%" height="100%"></iframe>',
closable: !!closable  
        }).show();
});
4.数据加载
var store = Ext.create('Ext.data.Store', {
        pageSize: 10,
        model: 'ForumThread',
        remoteSort: true,
        proxy: new Ext.data.HttpProxy({
            type: 'jsonp',
            url:'order/exceptionAction',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        }),
        sorters: [{
            property: 'deviceno',
            direction: 'DESC'
        }]
    });
先写到这里 慢慢完善
分享到:
评论
2 楼 endual 2012-08-11  
     
1 楼 kevin_zhm 2012-07-28  
beforeload()
能根据条件来控制刷新?

相关推荐

    extjs4Grid和jqGrid对比.doc

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

    extjs表格Grid比较全面的功能

    ExtJS表格Grid是一款强大的JavaScript组件,它在Web应用中用于展示和操作数据,尤其是在复杂的业务逻辑和大量数据处理中表现出色。这篇博客文章主要探讨了ExtJS Grid的全面功能,结合源码分析和实用工具,帮助开发者...

    php+extjs+grid实时显示更新数据

    EXTJS的Grid组件是一种强大的数据展示工具,可以轻松地处理大量数据,并提供灵活的排序、筛选和分页功能。 首先,我们需要理解PHP在其中的角色。PHP是一种广泛使用的服务器端脚本语言,特别适合于处理动态内容和与...

    ExtJS_grid.rar_Grid javascript_extjs grid

    这个"ExtJS_grid.rar"压缩包包含了关于学习ExtJS Grid的教程资源,特别是"第三节_ExtJS表格控件和树控件.pdf",它可能详细讲解了如何使用Grid以及与树形控件的结合。 1. **ExtJS Grid基本概念**: - **Grid Panel*...

    extjs 分页是碰到的问题,点击下一页事,查询条件无法传递

    在Extjs中使用`pagingtoolbar`组件进行分页操作时,通常情况下,当我们点击“下一页”,`store`会自动加载数据。但是,默认情况下`store`只传递了`start`和`limit`两个参数,这意味着如果之前进行了某种查询(例如...

    Extjs Grid2Grid拖拽

    4. **渲染和刷新**:拖放操作完成后,Grid需要更新视图以反映新的数据状态。这通常通过调用store的`loadData()`或`sync()`方法以及Grid的`refresh()`方法来实现。 5. **事件处理**:在实现拖放功能时,你需要关注几...

    Extjs4---grid的修改、删除功能---结合struts2、hibernate

    在本文中,我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能,同时结合Struts2和Hibernate技术,构建一个完整的CRUD(创建、读取、更新、删除)应用。ExtJS 4是一个强大的JavaScript UI库,提供了...

    ext js 页面自动刷新教程集合

    在Ext JS中,页面的自动刷新功能通常涉及到数据网格(Grid)的实时更新,这在处理动态数据流或者需要实时显示新数据的场景中非常常见。本教程集合将深入探讨如何在Ext JS中实现页面,特别是数据网格的自动刷新。 一...

    extjs4mvc的crud

    在ExtJS 4 MVC中,可以使用路由来实现URL与视图间的映射。 - **Ajax通信**:通常通过Ext.Ajax或Ext.data.proxy.Ajax与服务器进行异步数据交换。设置请求参数、处理响应,以及异常处理都在此层完成。 - **测试与...

    ExtJS Filter 实现表格过滤

    - **应用过滤器**:用户选择过滤条件后,Grid会自动更新,只显示符合条件的行。 ### 过滤类型 **3. 常见过滤类型** - **文本过滤**:允许用户输入文本,匹配列中的内容,常见的有“包含”、“不包含”、“等于”、...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    本篇文章将深入探讨ExtJS中的Tree和Grid,特别是Buffer Grid与Progress Grid的实现。 **一、ExtJS Tree组件** 1. **Tree组件基本概念**:Tree组件用于展示层次结构的数据,类似于操作系统中的文件系统,具有可折叠/...

    ExtJs DataGridView控件实例

    综上所述,"ExtJs DataGridView控件实例"涵盖了ExtJs的Grid组件使用,与AJAX、WCF服务和Linq的集成,以及各种功能的实现,包括分页、排序、提示、以及增删改查操作。这个实例为开发者提供了丰富的参考,帮助他们更好...

    spring+dwr+Extjs+sql2008的数组传递grid

    6. Grid组件:ExtJS的Grid组件是用于展示大量结构化数据的视图,它支持分页、排序、过滤等功能。在这个实例中,Grid会根据DWR返回的数据动态加载行,提供用户友好的数据浏览体验。 7. 整体架构:整个系统采用MVC...

    extjs 跟 struts+json

    文章可能通过一个实际项目或示例,详细解释了如何将ExtJS的Grid Panel与Struts 2通过JSON进行数据交互,帮助读者理解这两种技术的整合过程。学习这些内容有助于提升Web应用的用户体验,实现数据的实时更新和交互。

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    在ExtJS中,分页查询通常涉及到数据网格(Grid)组件,它允许用户浏览大量数据并分页显示。分页查询的关键在于如何从服务器获取和处理数据,以及如何在用户界面上呈现这些数据。以下是一些关键知识点: 1. **数据...

    extjs+servlet

    - **数据解析**:ExtJS的Store接收到JSON数据后,自动更新模型并刷新视图。 5. **安全与优化** - **数据验证**:Servlet端进行输入验证,防止SQL注入等安全问题。 - **缓存策略**:可以利用HTTP缓存机制,减少...

    Extjs与C#完美接合写法控件源代码

    - ExtJS 应用通常使用AJAX(异步JavaScript和XML)技术与C#后端进行通信,实现页面无刷新的数据交换。这可以通过Ext.Ajax或者Ext.data.Proxy(如RESTful Proxy)实现。 4. **JSON 数据格式**: - C#后端返回的...

    JSON 配合EXTJS的使用,所有的JAR包和使用代码,在做EXTJS无刷新界面时很有用,希望能有帮助

    4. **远程排序和分页**:EXTJS的Store可以通过配置实现远程排序和分页,这样在处理大量数据时,服务器只需要返回当前页的JSON数据,减少了网络传输负担。 5. **远程过滤**:同样,通过Proxy,EXTJS支持远程过滤,...

    asp.net与extjs开发点卡在线销售系统(十分经典)

    8. 性能优化:利用ASP.NET的输出缓存、页面局部刷新等技术提升系统性能,EXTJS的异步加载和分页机制减少服务器压力。 这个经典项目不仅展示了ASP.NET的强大后端处理能力和EXTJS的出色前端表现力,也为开发者提供了...

Global site tag (gtag.js) - Google Analytics