pc_155
2010-08-07 01:12 浏览 261

求教extjs问题:我想实现TabPanel加载的item页中加载新的item的问题

是这样的问题,不知道我能不能表达清楚。

先上个图

[img]http://dl.iteye.com/upload/attachment/289430/4031ffc4-9b09-31a8-9021-928b70c41bc8.gif[/img]

其实就是类似126邮件,在邮件列表中,点击一封邮件,跳转到另一个新的tabpanel中。

请问一下怎么实现的呢?

new Ext.TabPanel上的item是加载的一个新页面,我要在新页面上点击在父页上新加tabpanel.我真不知道怎么去定义,连搜索,我都不知道搜什么关键字。所以到这里来求教了。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答 默认 最新

  • 已采纳
    works001 works001 2010-08-07 07:35

    还有一种 通过ajax请求一个js的方式 实现新增一个tab页
    这里给出一个小例子
    [code="java"] if(!tabs.getItem(id)){
    Ext.Ajax.request({

    url:"<%=path%>/js/"+url,//这里是的请求那个js的具体地址 url稍微改一下
    success: function(response, opts){

    var obj = eval(response.responseText);
    obj.id=id,
    tabs.add(obj);

    tabs.setActiveTab(obj);
    tabs.doLayout();
    },
    failure : function(response, options) {
    Ext.Msg.alert("系统信息", "请求失败");
    }

    });
    }else{
    tabs.setActiveTab(tabs.getItem(node.id));
    }[/code]

    然后给出所请求的简单的一个js代码(代码简单 只是一个例子而已)
    code="java"{
    AccountUi = Ext.extend(Ext.form.FormPanel, {

    title: 'Account',

    labelWidth: 100,

    labelAlign: 'left',

    layout: 'form',

    width: 600,

    frame: true,

    initComponent: function() {

    this.items = [

    {

    xtype: 'container',

    autoEl: 'div',

    layout: 'column',

    items: [

    {

    xtype: 'container',

    autoEl: 'div',

    layout: 'form',

    columnWidth: 0.5,

    items: [

    {

    xtype: 'textfield',

    fieldLabel: 'First Name',

    anchor: '95%',

    name: 'fname',

    ref: '../../fname'

    },

    {

    xtype: 'datefield',

    fieldLabel: 'Birth of day',

    anchor: '95%',

    name: 'birthday',

    ref: '../../birthday'

    }

    ]

    },

    {

    xtype: 'container',

    autoEl: 'div',

    layout: 'form',

    columnWidth: 0.5,

    items: [

    {

    xtype: 'textfield',

    fieldLabel: 'Last Name',

    anchor: '95%',

    name: 'lname',

    ref: '../../lname'

    },

    {

    xtype: 'combo',

    fieldLabel: 'Sex',

    anchor: '95%',

    name: 'sex',

    ref: '../../sex'

    }

    ]

    }

    ]

    },

    {

    xtype: 'htmleditor',

    anchor: '98%',

    fieldLabel: 'Memo',

    height: 150,

    width: 300,

    name: 'memo',

    ref: 'memo'

    }

    ];

    this.fbar = {

    xtype: 'toolbar',

    items: [

    {

    xtype: 'button',

    text: 'Save',

    ref: '../saveBtn'

    },

    {

    xtype: 'button',

    text: 'Reset',

    ref: '../resetBtn'

    }

    ]

    };

    AccountUi.superclass.initComponent.call(this);

    }

    });

    Account = Ext.extend(AccountUi, {

    initComponent: function() {

    Account.superclass.initComponent.call(this);

        this.saveBtn.on('click', this.doSaveAction, this);   
    },   
    doSaveAction:  function() {   
        alert(this.fname.getValue());   
    }   
    

    });

    var account = new Account();

       return  new Ext.Panel({   //这个js返回的东西
                    draggable: false,
                    closable:true,
                    items:[account],
           });  
    

    })() //匿名函数
    [/code]

    点赞 评论 复制链接分享
  • works001 works001 2010-08-07 07:23

    我的一个小例子
    [code="java"]
    //点击按钮的时候调用这个函数
    function addPanelToTab(id,panelId){
    //先看tab上有没有这个panel

    var panel = tabs.getItem(panelId);
    //如果没有则tabs.add一个panel
    if(!panel){
    var grid = getGrid();
    panel = tabs.add({
    title:"详细信息",
    id:panelId,
    layout:"fit",
    //这里我用了items只是一种方式
    //你也可以用autoload或者iframe
    items:[grid],
    closable: true
    });
    }
    //新增的panel下有个grid 这行是加载数据
    panel.items.item(0).getStore().load({params:{id:id}}) //传过去id参数 加载store
    tabs.setActiveTab(panel);//设置panel标签页作为当前活动标签页
    tabs.doLayout();//强制容器的布局管理器重新计算布局

    }

    [/code]

    点赞 评论 复制链接分享
  • works001 works001 2010-08-08 12:19

    tabs.getItem(id) 我这里的tabs 得预先定义 设置成全局变量 然后其他部分的js才能访问到

    点赞 评论 复制链接分享

相关推荐