Ext 中将后台id的值传给window组件中TabPanel怎么做？

Question

下面的代码是后台绑定到panel中Item的信息
 {title:'2010年8月',id:'2010-8-1',disabledClass : 'x-item-disabled',overCls : 'x-item-disabled',xtype:'panel',Frame:false,html:'<div id=\'2010-8-1\' onmouseover=\'\' align=\'center\' style=\'cursor:hand;background-color: #ffcc66;height=100%;width=100%;margin:0 0 0 0;\'><font size=\'7\' color=\'#ff6699\'>1</font><br><font size=\'2\' color=\'#ff6699\'>星期日</font></div>',tools:[{id:'gear',qtip:'添加',visible:true,handler:setWorkStatus}]},
{title:'2010年8月',id:'2010-8-2',disabledClass : 'x-item-disabled',overCls : 'x-item-disabled',xtype:'panel',Frame:false,html:'<div id=\'2010-8-2\' onmouseover=\'\' align=\'center\' style=\'cursor:hand;background-color: #ffcc66;height=100%;width=100%;margin:0 0 0 0;\'><font size=\'7\' color=\'#f1f1f1\'>2</font><br><font size=\'2\' color=\'#f1f1f1\'>星期一</font></div>',tools:[{id:'gear',qtip:'添加',visible:true,handler:setWorkStatus}]}每个信息有个函数setWorkStatus当我点击这个函数的时候
如何获取当前panel的id
例如第一个是id:'2010-8-1'
这个是动态读取的
最后将这个值传递给Iframe
 var tabs2 = new Ext.TabPanel({  
                        //默认显示一个panel，也就是Title为：加班申请的
                            activeTab: 0,
                            width:'100%',
                            autoHeight:true,
                            plain:true,
                            defaults:{autoScroll: true},
                            items:[{
                                    title: '加班申请',
                                    html: '<iframe scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx"> </iframe>'
                                },{
                                    title: '请假申请',
                                    html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="380px" src="../../WebUI/AdditionalWork/LeaveWorkForm.aspx"> </iframe>'
                                }
                            ]
                        });

Answer 1

//这样获取panel的idvar setWorkStatus=function(panelId){
   alert(panelId);
}{
    title: '2010年8月',
    id: '2010-8-1',
    disabledClass: 'x-item-disabled',
    overCls: 'x-item-disabled',
    xtype: 'panel',
    Frame: false,
    html: '<div id=\'2010-8-1\' onmouseover=\'\' align=\'center\' style=\'cursor:hand;background-color: #ffcc66;height=100%;width=100%;margin:0 0 0 0;\'><font size=\'7\' color=\'#ff6699\'>1</font><br><font size=\'2\' color=\'#ff6699\'>星期日</font></div>',
    tools: [{
        id: 'gear',
        qtip: '添加',
        visible: true,
        handler: function(event, toolEl, panel, tc) {
            setWorkStatus(panel.id)
        }
    }]
},

Answer 2

var setWorkStatus=function(panelId){
   alert(panelId);
//这里就可以传到iframe中了
}

Answer 3

handler:setWorkStatus:后面需要的是js函数句柄 ,你可以如ls所写,定义匿名函数,然后在匿名函数内部调用自己指定的函数.---------------------------------------------------------------------------------要学会看文档handler : FunctionRequired. The function to     * call when clicked. Arguments passed are:     * event : Ext.EventObjectThe click event.     * toolEl : Ext.ElementThe tool Element.     * panel : Ext.PanelThe host Panel     * tc : ObjectThe tool configuration objecthttp://dev.sencha.com/deploy/dev/docs/source/Panel.html#cfg-Ext.Panel-tools清洁工大叔的这句 "有没有可调试的demo" 也很重要,有DEMO能够更快更有效的解决问题.

Answer 4

点击的时候加一个id是吧
var tabs2 = new Ext.TabPanel({  
                           //默认显示一个panel，也就是Title为：加班申请的
                            activeTab: 0,
                            width:'100%',
                            .....
});el.on("click", function (){
      Ext.apply(tabs2, {id: "yourID"});//yourID是你要添加的id
}); Ext.apply方法会向参数tabs2中，添加后面传递的参数对象
eg:
var u = {name: 'aa', age: 19};
alert(Ext.encode(u));
Ext.apply(u, {sex: true, address: 'china'});
alert(Ext.encode(u));//发现什么了，是不是多了sex、address属性
Ext.applyIf(u, {sex: false, birthday: '2999-09-09'});
alert(Ext.encode(u));//发现什么了，是不是多了birthday属性;sex值没有发生变化，因为是sex已经存在所以才不添加
Ext.applyIf if就是判断下再添加，判断后面的参数在添加的对象是否存在，如果存在就不添加，不存在的就
添加进去

Answer 5

     var setWorkStatus=function(panelId){
                 //Ext.apply(tabs2,{id:panelId});
                 Ext.getCmp("hiddenid").setValue(panelId);  
                 CurrentDate=Ext.getCmp('hiddenid').getValue();
                         //这个地方获取了 当前时间的值
                 Ext.Msg.alert('hello',CurrentDate);                   AdditionalWork.show();    
    
            };
但是我这里得不到那个值怎么回事？  items:[{
                                    title: '加班申请',
                                    html: '<iframe name="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+CurrentDate +'"> </iframe>'
                                }

Answer 6

src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+CurrentDate +'"> 
Iframe中参数Date为undefine 

Answer 7

var CurrentDate; 
var tabs2 = new Ext.TabPanel({  
                        //默认显示一个panel，也就是Title为：加班申请的
                            activeTab: 0,
                            width:'100%',
                            autoHeight:true,
                            plain:true,
                            defaults:{autoScroll: true},
                            items:[{
                                    title: '加班申请',
                                    html: '<iframe name="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+CurrentDate +'"> </iframe>'
                                },{
                                    title: '请假申请',
                                    html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="380px" src="../../WebUI/AdditionalWork/LeaveWorkForm.aspx"> </iframe>'
                                }
                            ]
                        });
 var AdditionalWork=new Ext.Window({
             title:'附加工作申请',
             autoHeight:true,
             width:'100%',
             //通过偏移到零下区域进行隐藏
             closeAction:'hide',
             items:tabs2
             }); var setWorkStatus=function(panelId){
                CurrentDate=panelId;
                   AdditionalWork.show();    
    
            };

Answer 8

var setWorkStatus=function(panelId){
                   CurrentDate=panelId;
                      AdditionalWork.show();    
    
               };
这里CurrentDate我用alert取出来确实
是我要的值但是html: '<iframe name="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+CurrentDate +'"> </iframe>'
中currentDate为undifined

Answer 9

var CurrentDate = "default"; //给个默认值看看，可能你赋值在调用之前或是没有赋值成功

Answer 10

var tabs2 = new Ext.TabPanel({  
                           //默认显示一个panel，也就是Title为：加班申请的
                            activeTab: 0,
                            width:'100%',
                            autoHeight:true,
                            plain:true,
                            cDate: "",
                            defaults:{autoScroll: true},
                            items:[{
                                    title: '加班申请',
                                    html: '<iframe name="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+this.cDate+'"> </iframe>'
                                },{
                                    title: '请假申请',
                                    html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="380px" src="../../WebUI/AdditionalWork/LeaveWorkForm.aspx"> </iframe>'
                                }
                            ]
                        });
tabs2.cDate = "121212";

Answer 11

html: '<iframe name="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+tabs2.cDate+'"> </iframe>'
换成tabs2.cDate应该可以

Answer 12

执行顺序的问题在你 setWorkStatus function 调用前, 
var tabs2 = new Ext.TabPanel({  
                           //默认显示一个panel，也就是Title为：加班申请的
                            activeTab: 0,
                            width:'100%',
                            autoHeight:true,
                            plain:true,
                            defaults:{autoScroll: true},
                            items:[{
                                    title: '加班申请',
                                    html: '<iframe name="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+CurrentDate +'"> </iframe>'
                                },{
                                    title: '请假申请',
                                    html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="380px" src="../../WebUI/AdditionalWork/LeaveWorkForm.aspx"> </iframe>'
                                }
                            ]
                        });就执行了,CurrentDate  当然没值 你可以给 iframe 指定id然后改变它的src 属性即可

Answer 13

我这边没有问题啊
那你就把html后面的代码定义全局的，赋值算了
我ls写的这些方法都是可以的，lz的怎么不行
主要js运行是有先后顺序的，赋值代码放在你的取值代码运行顺序的前面

Answer 14

我这个弄了下
采用更改Iframe的src属性来改变参数值
           var setWorkStatus=function(panelId){                 Ext.getCmp("hiddenid").setValue(panelId);  
                 CurrentDate=Ext.getCmp('hiddenid').getValue();
//这里报错  Ext.getDom（）为空或者不是对象               
Ext.getDom('work').src='../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+panelId;
                 AdditionalWork.show();    
    
            };
   var tabs2 = new Ext.TabPanel({  
                        //默认显示一个panel，也就是Title为：加班申请的
                            activeTab: 0,
                            width:'100%',
                            autoHeight:true,
                            plain:true,
                            cDate:"",
                            defaults:{autoScroll: true},
                            items:[{
                                    id:'work',
                                    title: '加班申请',
                                    html: '<iframe id="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx"> </iframe>'
                                },{
                                    title: '请假申请',
                                    html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="380px" src="../../WebUI/AdditionalWork/LeaveWorkForm.aspx"> </iframe>'
                                }
                            ]
                        });

Answer 15

已经解决啦
感谢大家
这样写即可  var setWorkStatus=function(panelId){
                 var AdditionalWork=new Ext.Window({
             title:'附加工作申请',
             autoHeight:true,
             width:'100%',
             //通过偏移到零下区域进行隐藏
             closeAction:'hide',
             //关闭windows之后增加监听事件
            // listeners   : {'hide':{fn: makesure}},
             items:
             [
               new Ext.TabPanel({  
                        //默认显示一个panel，也就是Title为：加班申请的
                            activeTab: 0,
                            width:'100%',
                            autoHeight:true,
                            plain:true,
                            defaults:{autoScroll: true},
                            items:
                            [{
                                    title: '加班申请',
                                    html: '<iframe id="work" scrolling="auto" frameborder="0" width="100%" height="260px" src="../../WebUI/AdditionalWork/OvertimeForm.aspx?Date='+panelId+'"> </iframe>'
                                }
                                
                                ,{
                                    title: '请假申请',
                                    html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="380px" src="../../WebUI/AdditionalWork/LeaveWorkForm.aspx"> </iframe>'
                                }
                            ]
                        })
             ]
             })
             AdditionalWork.show();
            }; 

Answer 16

如果想要获取tanpanel中的html页面输入框的值，怎么做呢？