Ext 的例子中的选项卡的问题

单看tabs-adv.html 这个例子很简单，但是如果用他和数据库交互的话，怎么也做不出来了。

当我每添加一个Ext.TabPanel，就在刚添加的Ext.TabPanel里面放一个Ext.grid.GridPanel，用来显示数据，

现在Ext.TabPanel和Ext.grid.GridPanel都是动态的，他们的ID都不是固定的，每个选项卡（Ext.TabPanel）的ID都是不同的

但唯有Ext.grid.GridPanel的数据源Ext.data.Store却无法写成动态的，所以现在做出的效果就是

新建一个选项卡A，里面的数据是从A表里面查出来的，

当我再建立一个选项卡B时，里面的数据是从B表里查出来的，

然而再回到选项卡A中，里面的数据也变成了从B表里查出来的了，

如果再新建选项卡C的话，A,B,C的选项卡都是从C表里查出来的数据。

这个并不是我想要的效果。希望有高手能帮我一下，谢谢。

21 个解决方案

#1

请大家帮我看看，我说的不太明白，还是发图注解吧

#2

具体看才知道！

#3

现在的不是代码有错误，是没有什么解决方案

或者说我可能不了解Ext.data.Store的属性方法

#4

自己顶下吧  希望会的兄弟能帮下忙

#5

没看到实际代码

#6

A,B,数据都有了.只是切换回去时的效果没达到.还是代码问题.

#7

没有示例看，也没有代码。。怎么说好

#8

var Datas=new Ext.data.Store        << 我希望这个Datas能动态的指定ID，因为我每打开一个选项卡绑定的Store都是这一个，所以最后一个打开的总是覆盖前面所创建的。
(
    {        proxy:new Ext.data.HttpProxy 
        (
            {
                url:'/ExtPractise/MyPages/List.aspx'
            }
        ),
        
        reader: new Ext.data.JsonReader  
        (
            {
                root:'data', 
                  fields:
                [
                    'id','title','bh','submittime','submitname'     
                ]   
            }
        ),
        
        pruneModifiedRecords : true
    }
);

#9

ext学习中

#10

引用 8 楼 qianqian51267 的回复:

var Datas=new Ext.data.Store        < < 我希望这个Datas能动态的指定ID，因为我每打开一个选项卡绑定的Store都是这一个，所以最后一个打开的总是覆盖前面所创建的。 
( 
    {        proxy:new Ext.data.HttpProxy 
        ( 
            { 
                url:'/ExtPractise/MyPages/List.aspx' 
            } 
        ), 
        
        reader: new Ext.data.JsonReader  
        ( 
            { …

你是没有动态加载数据吧，意思就是说，你切换的时候并没有使之获取对应的数据或者是根本就没有再重新获取而是用最后加载的的

#11

我的意思和chinamo的有点出入

我的意思是多个选项卡绑定多个数据源，可以说是多对多的关系

然而现在确实多个选项卡绑定的一个数据源，是多对一的关系。

chinmo 的意思是我点选项卡的时候添加一个点击事件吗？

那样的话要多做一次查询了，

确实，这也是个好办法，不过我觉的这样并不是最好的办法。

#12

你绑定的数据没有成功，这点是肯定的
你自己看你下你生成html后的源码是否绑定有多条数据，还是只是最后的记录就清楚了

#13

肯定没有绑定多条数据，他绑定第二条后就覆盖了第一条，绑定第三条又覆盖了前两条

现在我正在尝试着向tab中添加事件

var tabs = new Ext.TabPanel({
            renderTo:'tabs',
            resizeTabs:true,
            minTabWidth: 115,
            tabWidth:135,
            enableTabScroll:true,
            width:1000,
            height:1250,           
            defaults: {autoScroll:true},   
            plugins: new Ext.ux.TabCloseMenu()
        });

        function addTab(dd){
            try{
                tabs.add({
                    title:dd,
                    iconCls: 'tabs',  
                    html:"<div id='grid"+gridCountdd1+"'>"+gridCountdd1+"</div>", 
                    closable:true
                }).show();
                ExtDataGrid(dd,gridCountdd1);
                gridCountdd1 ++;
            }catch(e){
                alert('addTab error');
            }
       }


能帮我看看怎么在addTab(add)这个函数里面给tab添加一个事件吗？

#14

<div id='grid"+gridCountdd1+"' onclick='aaa()'>"+

这样即可

#15

木有用过，dhDataGrid倒是可以推荐一下 ^_^

就像  http://www.v-ec.com/jslib/

#16

呵呵，是dhTabStrip ^_^

#17

tabs.on('tabchange',tabChange);
function tabChange(o,e)
{
  //code...
}

#18

这个问题在ext1.1的时候比较头疼，解决办法就是tab下新添一个iframe,tabchang时更改iframe的src即可，不知道ext2.0有无修正,你应该去官方论坛咨询一下

#19

引用 14 楼 chinmo 的回复:

<div id='grid"+gridCountdd1+"' onclick='aaa()'>"+ 

这样即可

这样不行，这么做是点击选项卡的主体触发事件，这个div是用来显示内容的

#20

引用 17 楼 foolbirdflyfirst 的回复:

JScript codetabs.on('tabchange',tabChange);
function tabChange(o,e)
{
  //code...
}

恩  这种方法我试试

#21

引用 15 楼 dh20156 的回复:

木有用过，dhDataGrid倒是可以推荐一下 ^_^ 

就像  http://www.v-ec.com/jslib/

恩  看起来不错，做完这个项目我会学习学习的 。