`
liss
  • 浏览: 844180 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

实现Ext.TabPanel中tab内容的更新

阅读更多

Ext.TabPanel中,如果一个tab项使用了autoLoad的话,只当该tab被激活后加载一次。但在实际使用的时候我们可能需要的是当其激活时,显示的是加载页面的最新信息,如新闻等。那么如何实现呢?

看下面的例子:

var tabs = new Ext.TabPanel({
   id:"treeTab",
   border:false,
   items:[{
    title:"修改密码"
   },{
    title:"用户信息",
    autoLoad:{
     url:"userinfo.jsp",
     scripts:true
    },
   listeners:{
     activate:function(tab){
      tab.getUpdater().refresh();
     }
    }

   }]
});

红色区域就是实现该功能的关键代码,为listeners添加activate事件。

官网API中getUpdater()方法说明:

getUpdater() : Ext.Updater

 

Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.

实现对AJAX内容的更新。

更多用法请参见官网API的

Ext.TabPanel,Ext.Updater两个类

分享到:
评论

相关推荐

    ExtJS-3.4.0系列:Ext.TabPanel

    在本文中,我们将深入探讨ExtJS中的`Ext.TabPanel`组件,它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图,每个面板都有自己的标题,并且可以通过标签页进行切换。让我们...

    extjs4.2.1 tabPanel刷新及关闭标签

    在此函数中,首先获取当前激活的标签页,然后遍历`TabPanel`中的所有子项,对于每个子项,检查是否为当前激活的标签页以及是否可关闭(`closable`属性)。如果满足条件,则调用`remove`方法将其移除。 #### 关闭...

    ext的tabpanel的激活与注意事项

    在提供的`tabpanel激活函数和更新.doc`文件中,可能会详细阐述如何在实际项目中实现这些功能和注意事项。查阅此文档,可以获取更具体的代码示例和实践经验。 总的来说,EXTJS的tabpanel组件提供了丰富的功能和灵活...

    Ext中TabPanel的动态页面加载

    在EXT JS这个强大的JavaScript库中,`TabPanel`是一个核心组件,用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,...

    可以拖拽的页签面板----Ext TabPanel

    在EXT JS这个强大的JavaScript框架中,`Ext.TabPanel` 是一个非常重要的组件,它用于创建具有可切换页签的用户界面。在这个特定的例子中,我们关注的是一个扩展版的`Ext.TabPanel`,它增加了拖放(DragDrop)功能,...

    ext.js拖动3.4版本插件

    在提供的链接中,`https://www.onenaught.com/examples/ext/draggable-tabs-example.html`,你可以看到一个完整的示例,展示了如何使用Ext JS 3.4的拖动插件来实现Tab的拖放功能。这个示例涵盖了基本的配置和事件...

    Ext中的tabpanel关闭后再打开不显示的问题

    在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新打开该标签页,则可能会出现无法正常显示的情况...

    Extjs4.2 设置tabpanel当前活动页签的样式

    例如,可以使用 `tabpanel.getActiveTab()` 方法来获取当前活动页签,然后使用 `tab.setStyle()` 方法来设置该页签的样式。这种方法可以提供更好的灵活性和可扩展性。 设置tabpanel当前活动页签的样式是Extjs开发中...

    Ext.TabPanel

    TabPanel的使用,添加tab,加载页面,添加事件

    Ext.plugins.TDGi.tabScrollerMenu插件的使用

    Ext.plugins.TDGi.tabScrollerMenu插件是用于Ext JS框架的一个扩展,它主要用于解决TabPanel组件中的选项卡过多时的展示问题。当TabPanel的选项卡数量超过一定限制,这个插件会提供一个下拉菜单,用户可以通过该菜单...

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

    **2.11 Tab Panel (Ext.TabPanel)** - **xtype**: `tabpanel` - **功能描述**:Tab Panel 是一个包含多个选项卡的容器。 - **主要用途**:用于展示多个相关的数据集或功能模块,每个选项卡代表一个不同的页面。 **...

    ExtJS TabPanel beforeremove beforeclose使用说明

    在ExtJS中,TabPanel是常用的组件,用于展示多个面板(Panel)并提供标签页切换功能。当用户尝试关闭TabPanel中的某个Panel时,我们可能需要执行一些验证或确认操作,例如弹出对话框询问用户是否真的要关闭当前页面...

    课程ExtTabPanel文档tab嵌套tab.pdf

    在本文中,我们将深入探讨如何使用Ext.TabPanel创建和管理选项卡,包括基本的使用方法、内容引入方式以及如何实现选项卡的嵌套。 1. **引入Ext库** 在使用Ext.TabPanel之前,首先需要引入ExtJS库。这通常通过引入`...

    extjs4.x tabpanel 动态加载panel和html例子

    Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), // 将tabpanel渲染到body activeTab: 0, // 默认选中的tab layout: 'fit', // 使用fit布局,使得panel完全填充tabpanel items: [] }); ``` 2. **...

    ExtJS扩展:垂直页签tabPanel

    在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以提供更好的用户界面体验。 首先,我们看到有两个JavaScript文件,TabPanel.js...

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    var tabPanel = Ext.create('Ext.tab.Panel', { width: 600, height: 300, items: [ { title: 'Value Table', layout: 'fit', items: Ext.create('MyApp.view.MyGrid') } ] }).render(Ext.getBody()); })...

    jQuery模仿ExtJS之TabPanel最新

    TabPanel(选项卡组件) 参数说明 renderTo| jQuery object | NULL> 渲染到某容器 将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 ...

    ext-------竖向标签TabPanel

    竖向标签TabPanel-------------------------------------------------

    ExtJS tabPanel实例

    var tabPanel = Ext.create('Ext.tab.Panel', { width: 800, height: 600, renderTo: Ext.getBody(), // 将组件渲染到页面body items: [{ title: '首页', html: '这是第一个标签页的内容' }, { title: '用户...

    Ext开发总结

    在本文中,我们将深入探讨Ext开发...以上只是Ext 2.3开发中的一部分内容,实际开发中还包括布局管理、数据绑定、表单组件、Ajax通信、树形组件等大量功能。学习和掌握Ext,将极大地提升你在Web应用开发中的效率和能力。

Global site tag (gtag.js) - Google Analytics