Extjs组件之间的整合问题。

Question

这样两个组件 我分开的时候都没问题 因为刚学extjs所以还有很多东西不懂，大家帮我看看是那个地方的问题啊?firebug报错 : a is undefined；
Ext.onReady(function(){
var imgform =  new Ext.FormPanel({
        region:'center',
        labelWidth:55,
        frame:true,
        bodyStyle:'padding:5px 5px 0',
        autoScroll:true,
        border: false,
        fileUpload:true,
        items:[
           comboxWithPanel,
          {
            xtype:'textfield',
            fieldLabel : '选择文件',
            name:'image',
            inputType:'file',
            allowBlank:false,
            blankText:'文件不能为空',
            height:25,
            anchor:'90%'
        }],
        buttons:[{
            text:'确定',
            type:'submit',
            handler: function(){
                if(!imgform.form.isValid()){return;}//文件上传不能为空，返回
                else{
                    imgform.getForm().submit({
                    url:'http://localhost:8080/myboxcn_cs/control/Myshop/manage!add_shop',
                    waitMsg:'正在上传.......',
                    success: function(form){ 
                        Ext.MessageBox.alert('Message','提交成功');
                        win.hide(); 
                    },
                    failure: function(form,action){
                        form.reset();
                        if(action.failureType == Ext.form.Action.SERVER_INVALID)
                            Ext.MessageBox.alert('警告',action.result.errors.msg);
                    }
                })
                }
            }
        },
        {
            text:'关闭',
            type:'submit',
            handler:function(){
                win.close();
            }   
        }]
    });
    var win=new Ext.Window({
        title:'店铺添加',
        width:300,
        height:200,
        modal:true,
        border:false,
        layout:'fit',
        items:imgform
        });
  
var comboxWithPanel = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<div style="height:200px"><div id="panel"></div></div>',
selectedClass:'',
onSelect:Ext.emptyFn
});
comboxWithPanel.render('comboxWithPanel');
var tree2 = new Ext.tree.TreePanel({  
                
             
                border:true,         
                animate:true,
                frame : true,
                columnWidth:.33,  
                //columnHeight:.100,  
                height:600,  
                collapsible: true,  
                margins:'5 0 5 5',  
                cmargins:'5 5 5 5',  
                rootVisible:false,  
                lines:true,               
                autoScroll:true,  
                root: new Ext.tree.AsyncTreeNode({  
                id:'0',  
                text:'分组信息',  
                expanded :true  
               }),  
               collapseFirst:false,      
              loader:new Ext.tree.TreeLoader({  
                 dataUrl:'http://localhost:8080/myboxcn_cs/control/producttype/manage!treelist'  
        }),
   });
   tree2.on('beforeload',function(node){ 
            if(node.id==0){
            tree2.loader.dataUrl = 'http://localhost:8080/myboxcn_cs/control/shopLocation/manage!treelist';
            }
            if(node.id>0){
            tree2.loader.dataUrl = 'http://localhost:8080/myboxcn_cs/control/shopLocation/manage!treelist1?parentid='+node.id;  
            }
            }); 
             
            tree2.on('click',function(node){
   comboxWithPanel.setValue(node.text);
   comboxWithPanel.collapse();
   });
            
var border = new Ext.Panel({
title:'店铺路段',
layout:'fit',
border:false,
height :200,
    tbar:[{text:'选择'},'-',new Ext.form.TextField({id: 'bb',width:60}),{text:'确定'}],
items: tree2
   });
comboxWithPanel.on('expand',function(){
border.render('panel');
   });  win.show();
});

Answer 1

Ext.onReady(function(){
var imgform =  new Ext.FormPanel({
        region:'center',
        labelWidth:55,
        frame:true,
        bodyStyle:'padding:5px 5px 0',
        autoScroll:true,
        border: false,
        fileUpload:true,
        items:[
           //comboxWithPanel,
          {
            xtype:'textfield',
            fieldLabel : '选择文件',
            name:'image',
            inputType:'file',
            allowBlank:false,
            blankText:'文件不能为空',
            height:25,
            anchor:'90%'
        }],
        buttons:[{
            text:'确定',
            type:'submit',
            handler: function(){
                if(!imgform.form.isValid()){return;}//文件上传不能为空，返回
                else{
                    imgform.getForm().submit({
                    url:'http://localhost:8080/myboxcn_cs/control/Myshop/manage!add_shop',
                    waitMsg:'正在上传.......',
                    success: function(form){ 
                        Ext.MessageBox.alert('Message','提交成功');
                        win.hide(); 
                    },
                    failure: function(form,action){
                        form.reset();
                        if(action.failureType == Ext.form.Action.SERVER_INVALID)
                            Ext.MessageBox.alert('警告',action.result.errors.msg);
                    }
                })
                }
            }
        },
        {
            text:'关闭',
            type:'submit',
            handler:function(){
                win.close();
            }   
        }]
    });
    var win=new Ext.Window({
        title:'店铺添加',
        width:300,
        height:200,
        modal:true,
        border:false,
        layout:'fit',
        items:imgform
    });
  
   var comboxWithPanel = new Ext.form.ComboBox({
        store:new Ext.data.SimpleStore({fields:['displayText'],data:[['ss'], ['aaa']]}),
        editable:false,
        mode: 'local',
        triggerAction:'all',
        maxHeight: 200,
        tpl: '<div style="height:200px"><div id="panel"></div></div>',
        //selectedClass:'',
        onSelect:Ext.emptyFn
    });
    comboxWithPanel.render('comboxWithPanelID');
    var tree2 = new Ext.tree.TreePanel({  
                border:true,         
                animate:true,
                frame : true,
                columnWidth:.33,  
                //columnHeight:.100,  
                height:600,  
                collapsible: true,  
                margins:'5 0 5 5',  
                cmargins:'5 5 5 5',  
                rootVisible:false,  
                lines:true,               
                autoScroll:true,  
                root: new Ext.tree.AsyncTreeNode({  
                id:'0',  
                text:'分组信息',  
                expanded :true  
               }),  
               collapseFirst:false,      
              loader:new Ext.tree.TreeLoader({  
                 dataUrl:'http://localhost:8080/myboxcn_cs/control/producttype/manage!treelist'  
        }),
      });
      tree2.on('beforeload',function(node){ 
               if(node.id==0){
               tree2.loader.dataUrl = 'http://localhost:8080/myboxcn_cs/control/shopLocation/manage!treelist';
               }
               if(node.id>0){
            tree2.loader.dataUrl = 'http://localhost:8080/myboxcn_cs/control/shopLocation/manage!treelist1?parentid='+node.id;  
            }
            }); 
             
            tree2.on('click',function(node){
          comboxWithPanel.setValue(node.text);
          comboxWithPanel.collapse();
      });
            
    var border = new Ext.Panel({
        title:'店铺路段',
        layout:'fit',
        border:false,
        height :200,
        tbar:[{text:'选择'},'-',new Ext.form.TextField({id: 'bb',width:60}),{text:'确定'}],
        items: tree2
      });
    comboxWithPanel.on('expand',function(){
        border.render('panel');
      });

  win.show();
});

Answer 2

回2楼，
comboxWithPanel 注释掉后 
那根本就没显示了啊。我刚刚尝试了 这样 renderTo:Ext.getBody(),
两个组件倒是都显示出来了 但是没有在Window panel里面 如果我把 comboxWithPanel 写到
Window的items里面又会报错。
 var comboxWithPanel = new Ext.form.ComboBox({
       renderTo:Ext.getBody(),
        store:new Ext.data.SimpleStore({fields:['displayText'],data:[['ss'], ['aaa']]}),
        editable:false,
        mode: 'local',
        triggerAction:'all',
        maxHeight: 200,
        tpl: '<div style="height:200px"><div id="panel"></div></div>',
        //selectedClass:'',
        onSelect:Ext.emptyFn
    });