TabPanel通过iframe加载页面问题

大家好！近段时间在弄EXT,我用的是EXT3.2.1的版本,单页面userDataGrid.jsp显示是没有问题的，如附件图片userDataGrid.bmp所示,userDataGrid.js的代码：

 

Ext.apply(Ext.form.VTypes, {
    password : function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },

    passwordText : 'Passwords do not match'
});

var getCheckValue = function (dom){
	if( !dom ) return ;
	return (dom.checked)?1:0;
}

var getCheckboxValue = function (dom){
	if( !dom ) return ;
	return dom.checked;
}



Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
	Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    
	//===================================================================================
	// simple array store
    var user_data_form_store = new Ext.data.JsonStore({
		fields : ['name2', 'userType'],
		data   : [
			{name2 : 'Administrator',   userType: '0'},
			{name2 : 'Manager',  userType: '1'},
			{name2 : 'Operator', userType: '2'},
			{name2 : 'Stuff', userType: '3'}
		]
	});

	var combo = new Ext.form.ComboBox({
		tpl: '<tpl for="."><div ext:qtip="{name2}. (value={userType})" class="x-combo-list-item" style="color:green">{name2}</div></tpl>',
		store: user_data_form_store,
		name:  'userType',
		id:		'userType_id',
		fieldLabel: 'User Type',
		hiddenName:'userType',
		displayField: 'name2',
		allowBlank : false,
		valueField :  'userType',
		typeAhead: true,
		mode: 'local',//or use remote
		forceSelection: true,
		triggerAction: 'all',
		editable:       false,
		emptyText:'Select an User Type...',
		selectOnFocus:true,
		anchor:'94%'
		//applyTo: 'local-states'
	});

	var allowSms = new Ext.form.Checkbox({
		   name: 'allowSms',
		   id: 'allowSms_id',
		   fieldLabel: 'Allow Sms',
		   anchor:'94%'
	});
	var allowEmail = new Ext.form.Checkbox({
		   name: 'allowEmail',
		   id: 'allowEmail_id',
		   fieldLabel: 'Allow Email',
		   anchor:'94%'
	});
	var allowJob = new Ext.form.Checkbox({
		   name: 'allowJob',
		   id: 'allowJob_id',
		   fieldLabel: 'Allow Job',
		   anchor:'94%'
	});
	var allowPhone = new Ext.form.Checkbox({
		   name: 'allowPhone',
		   id: 'allowPhone_id',
		   fieldLabel: 'Allow Phone',
		   anchor:'94%'
	});
	
	var contact = new Ext.form.TextField({
			fieldLabel: 'Contact',
			allowBlank : true,
			//maxLength: 20,
			id:'contact_id',
			name: 'contact',
			anchor:'94%'									 
	});

	var createDate = new Ext.form.DateField({
			allowBlank : true,
			editable:   false,
			format : 'Y-m-d H:i:s',
			showToday : true,
			selectOnFocus : false,
			name: 'createDate',
			id:'createDate_id',
			fieldLabel: 'CreateDate',
			anchor:'94%'										
	});
	
	var address = new Ext.form.TextField({
			fieldLabel: 'Address',
			allowBlank : true,
			//maxLength: 20,
			id:'address_id',
			name: 'address',
			anchor:'96%'									 
	});
	
	var user_form = new Ext.FormPanel({
		//labelAlign: 'top',
		id :'user_form_ids',
		labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        //title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle:'padding:10px 10px 0 10px',
        width: 700,
		heigh: 1000,
        items: [{
            layout:'column',
            items:[{
                columnWidth:.5,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'User Name',
					allowBlank : false,
					maxLength: 20,
					id:'userName',
                    name: 'userName',
                    anchor:'94%'
                }, {
                    xtype:'textfield',
					inputType: 'password',
                    fieldLabel: 'Password',
					allowBlank : true,
                    name: 'password',
					id:'password',
                    anchor:'94%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'GSM Phone',
					allowBlank : true,
					maxLength: 20,
					id:'gsmPhone',
                    name: 'gsmPhone',
                    anchor:'94%'
                }, {
					xtype:'checkbox',
					name: 'allowSms2',
				   id: 'allowSms_id',
				   fieldLabel: 'Allow Sms',
				   anchor:'94%'	
				}, allowSms, allowJob, contact
				]
            },{
                columnWidth:.5,
				labelWidth: 105, 
                layout: 'form',
                items: [
					combo	
                ,
				{
                    xtype:'textfield',
					vtype:'password',
					inputType: 'password',
					allowBlank : true,
                    fieldLabel: 'Confirm Password',
                    name: 'repassword',
					id:'repassword',
					initialPassField:'password',
                    anchor:'94%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'E-mail',
                    name: 'email',
					id:'email',
                    vtype:'email',
                    anchor:'94%'
                }, 
				allowEmail, allowPhone, createDate
				]
            }]
        }, address, {
            xtype:'htmleditor',
            id:'remark_id',
			name:'remark',
            fieldLabel:'Remark',
            height:200,
            anchor:'96%'
        },{
			xtype:'hidden',
			fieldLabel:'Hidden Text',
			name:'userId',
			id:'userId_id',
			value:'null',
			anchor:'96%'
		}],

        buttons: [{
            text: 'Load Data',
			anchor:'90%',
			handler : function(){
					user_form.getForm().load({
	                    url: '/userData.do',
	                    waitMsg: 'Loading your information...',
						params : {"method":"loadUserData","userId":"51"},
						method : 'GET',
	                    success: function(user_form, a){
						   if(a.result.data.favoritie3 == "asdf"){ 
							   Ext.getCmp("favoritie3").setValue(true); 
						   } 
						   //Ext.getCmp("favoritie4").setValue(a.result.data.favoritie4 == "abc"); 
						   Ext.getCmp("repassword").setValue(Ext.getCmp("password").getValue());
	                       Ext.Msg.alert('Success', 'Processed successfully on the server, your name is :'+a.result.data.userName);
						   //msg('Success', 'Processed file "'+o.result.file+'" on the server');
	                    },
						failure:function(user_form, a){
							Ext.Msg.alert('Failure', 'Failure...'+a.result.data.description);
							user_form.reset();
						}
	                });
			}
        },{
            text: 'Save',
			anchor:'90%',
			handler : function(){
				if (user_form.getForm().isValid()){
					user_form.getForm().submit({
	                    url: '/userData.do',
	                    waitMsg: 'Saving your information...',
						params : {"method":"addUserData","allowSms":getCheckValue(Ext.getCmp("allowSms_id")),
									"allowEmail":getCheckValue(Ext.getCmp("allowEmail_id")),"allowJob":getCheckValue(Ext.getCmp("allowJob_id")),
									"allowPhone":getCheckValue(Ext.getCmp("allowPhone_id"))},
	                    success: function(user_form, a){
	                        Ext.Msg.alert('Success', 'Processed successfully on the server, your name is :'+a.result.result.userId);
							
							//msg('Success', 'Processed file "'+o.result.file+'" on the server');
	                    },
						failure:function(user_form, a){
							Ext.Msg.alert('Failure', 'Failure...');
							//user_form.reset();
						}
	                });	
				} //end if
			}
        },{
            text: 'Reset',
			anchor:'90%',
			handler: function() {
				user_form.form.reset();
			}
        }]						  
	});

	//===================================================================================
	
    // create the Grid of start
    // example of custom renderer function
    function change(val){
        if(val.length > 20){
            return '<span style="color:red;">' + val + '</span>';
        }else if(val.length > 15){
            return '<span style="color:green;">' + val + '</span>';
        }
        return val;
    }
	
	function checkBoxRenderer(val){
        if(val == 1){
            return '<span style="color:red;">' + true + '</span>';
        }else if(val == 0){
            return '<span style="color:green;">' + false + '</span>';
        }
        return val;
    }

	function grid_refresh(){
		Ext.apply(store.baseParams, {   
			"start":0,
			"limit":10,
			"method":"searchUserData",
			"userName":Ext.get('keywordText_id').getValue()
		});
		store.load();
	}
    // create the data store
    var store = new Ext.data.Store({								   
		baseParams:{"method":"searchUserData"},
		proxy: new Ext.data.HttpProxy({   
			url: "/userData.do"
		}),//new Ext.ux.data.PagingMemoryProxy(myData),
		autoDestroy: true,
      	remoteSort:true,
		autoLoad: {params:{start:0, limit:10}},
		
        reader: new Ext.data.JsonReader({
			root: 'data',   
			totalProperty: 'recordCount',   
			idProperty: 'id',
			sortInfo: {field:'userName', direction:'ASC'},
            fields: [
               {name: 'userId', type: 'int'},
               {name: 'userType', type: 'int'},
               {name: 'userName', type: 'string'},
               {name: 'password', type: 'string'},
               {name: 'allowSms', type: 'int'},
               {name: 'gsmPhone', type: 'string'},
               {name: 'contact', type: 'string'},
               {name: 'address', type: 'string'},
               {name: 'email', type: 'string'},
               {name: 'allowEmail', type: 'int'},
               {name: 'allowJob', type: 'int'},
               {name: 'allowPhone', type: 'int'},
               {name: 'createDate', type: 'date', dateFormat: 'Y-m-d H:i:s'},
               {name: 'remark', type: 'string'}
            ]
        })
    });


	var keywordText = new Ext.form.TextField({   
		//fieldLabel: 'keyword',
		id : 'keywordText_id',
		name: 'keyword',   
		anchor: '95%',   
		maxLength: 25  
	});
	
	var sm = new Ext.grid.CheckboxSelectionModel({
         dataIndex:"userId"
	});

	var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
   sm,
   new Ext.grid.RowNumberer({width: 30, header:"<font color='red'>No.</font>"}),
            {id:'userId',header: "User Id", width: 50, hidden: false, dataIndex: 'userId'},
            {header: "User Type", width: 75, dataIndex: 'userType'},
            {header: "userName", width: 150, renderer: change, dataIndex: 'userName'},
            {header: "password", width: 120, dataIndex: 'password'},
            {header: "gsmPhone", width: 120, dataIndex: 'gsmPhone'},
            {header: "email", width: 125, dataIndex: 'email'},
            {header: "createDate", width: 120,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), dataIndex: 'createDate'},
            {header: "contact", width: 200, dataIndex: 'contact'},
            {header: "address", width: 200, dataIndex: 'address'},
            {header: "allowSms", width: 60, renderer: checkBoxRenderer, dataIndex: 'allowSms'},
            {header: "allowEmail", width: 60, dataIndex: 'allowEmail'},
            {header: "allowJob", width: 60, dataIndex: 'allowJob'},
            {header: "allowPhone", width: 60, dataIndex: 'allowPhone'},
            {header: "remark", width: 275, hidden:true, dataIndex: 'remark'}
        ],		loadMask:true,
        stripeRows: true,
        //autoExpandColumn: 'userName_id',
        layout:'fit',
/*        height:800,
        width: 1200,*/
        bodyStyle:'margin:0;padding:0;',
		//autoWidth: true,
		width : Ext.get('user_data_grid_div_id').getWidth(),
		height : Ext.get('user_data_grid_div_id').getHeight(),
        frame:true,
        title:'User Data Grid List Sliding Pager Test',

        plugins: new Ext.ux.PanelResizer({
            minHeight: 100
        }),
		
		tbar:[{
			  id:'add_id',
			  text:'Add',
			  iconCls: 'add',
			  handler: function(){
					var win = new Ext.Window({
						//contentEl:"win",
						scripts: true,
						title: 'User Data',
						closable:true,
						width:720,
						height:480,
						closeAction:'hide',
						border:false,
						plain:true,
						layout: 'border',
						items: new Ext.Panel({
								region: 'center',
								margins:'3 3 4 3', 
								cmargins:'3 3 3 3',
								autoDestroy : true,
								defaults:{autoScroll:true},
								items:[user_form]
							})
					});
				  win.show();
			 }

		}, '-', {
			  id:'remove_id',
			  text:'Remove',
			  iconCls: 'remove',
			  handler: function(){
				   store.load({params:{start:0, limit:10,"method":"loadUserDataGrid"}});
				   Ext.Msg.alert('Result Tips', "Remove a record seccessfully...");	
			  }
		}, '->', 
		'Search a UserName?: ', keywordText,{
				id:'search_id',
				text: 'Search',   
                pressed: false,   
                iconCls: 'search',   
                handler: grid_refresh
		},' '],
		
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
	 
            plugins: new Ext.ux.ProgressBarPager()
        })
    });
	
	window.onresize = function(){ 
        grid.setWidth(0); 
        grid.setHeight(0); 
        grid.setWidth(Ext.get("user_data_grid_div_id").getWidth()); 
        grid.setHeight(Ext.get("user_data_grid_div_id").getHeight()); 
	};

	//控制缩放的时候修改grid的高度
	grid.on('afterlayout',function(view,layout){
	  var height = grid.getSize().height - 30;
	},this);

	// create the Grid of end
    grid.render("user_data_grid_div_id");
	store.load({params:{start:0, limit:100000,"method":"searchUserData"}});
	

});

 

 userDataGrid.jsp代码所示：

<html>  
<script type="text/javascript" src="adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="js/common/ext-all.js"></script>
。。。其他的一些js加载省略了
<body>
   <div id="user_data_grid_div_id" style="width:100%;height:100%; margin:0; padding:0" ></div>
  </body>
</html>

 

 

现在我想在主框架页面(main.jsp,main.js)上动态加载其他页面(userDataGrid.jsp)，如ext_main.bmp所示，我是用TabPanel里面的iframe加载的。通过iframe加载后有些功能就不能正常使用：grid分页的按钮，grid工具上的按钮和查询功能按钮都不能正常使用了,main.js：

Ext.onReady(function(){

        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
     
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            {
                region: 'north',
                contentEl: 'viewport',
                split: true,
                minSize: 124,
                maxSize: 124,
                margins: '0 0 0 0'
            }, {
                region: 'south',
                contentEl: 'south12',
                split: true,
                minSize: 5,
                maxSize: 5,
                title: ' ',
                margins: '0 0 0 0'
            }, {
                region: 'east',
                title: 'East Side',
                collapsible: true,
                split: true,
                width: 225, // give east and west regions a width
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                layout: 'fit', // specify layout manager for items
                items:            // this TabPanel is wrapped by another Panel so the title will be applied
                new Ext.TabPanel({
                    border: false, // already wrapped so don't add another border
                    activeTab: 1, // second tab initially active
                    tabPosition: 'bottom',
                    items: [{
                        html: '<p>A TabPanel component can be a region.</p>',
                        title: 'A Tab',
                        autoScroll: true
                    }, new Ext.grid.PropertyGrid({
                        title: 'Property Grid',
                        closable: true,
                        source: {
                            "(name)": "Properties Grid",
                            "grouping": false,
                            "autoFitColumns": true,
                            "productionQuality": false,
                            "created": new Date(Date.parse('10/15/2006')),
                            "tested": false,
                            "version": 0.01,
                            "borderWidth": 1
                        }
                    })]
                })
            }, {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'West',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [{
                    contentEl: 'west',
                    title: 'Navigation',
                    border: false,
                    iconCls: 'westnavigationnavigation' // see the HEAD section for style used
                }, {
                    title: 'Settings',
                    html: '<p>Some settings in here.</p>',
                    border: false,
                    iconCls: 'westnavigationsettings'
                }]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            tabs
            ]
        });
        viewport.doLayout();
        // get a reference to the HTML element with id "hideit" and add a click listener to it 
        Ext.get("hideit").on('click', function(){
            // get a reference to the Panel that was created with id = 'west-panel' 
            var w = Ext.getCmp('west-panel');
            // expand or collapse that Panel based on its collapsed property state
            w.collapsed ? w.expand() : w.collapse();
        });
    });

 

动态加载的TabPanel.js代码：

var indexId = "new_tab_id_";
	var title = "";
	
	Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
     onRender : function(ct, position){
          this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, margin:0, padding:0, src: this.url});
	     }
	});

	function addNewTab(str, url){
	//alert(url);
		//indexId = indexId + str;
		title = document.getElementById(str).innerHTML;
		var obj = Ext.getCmp(indexId + str);
		if (!obj){
			var obj = new Ext.Panel({
				id:indexId + str,
				title: title,
				width:'100%',
				height:'100%',
				iconCls: 'newtab',
				closable: false,
				frame:true,
				layout: 'fit', 
				items: [ new Ext.ux.IFrameComponent({ id: indexId + str, url: url }) ],
				 listeners:{
				 activate:function(tab){
				  tab.getUpdater().refresh();
				 }
				}

				//html:'<iframe id="'+indexId + str+'" scrolling="auto" frameborder="0" width="100%" height="100%" style="margin:0; padding:0;" src="'
				//			+url+'"></iframe>'
				//autoLoad: {url: url, method:'GET', params: 'foo=bar&wtf=1', scripts:true}
			});
			tabs.add(obj);
			//tabs.setActiveTab(obj);
/*			tabs.add({
				id:indexId + str,
				title: title,
				closeAction:'close', 
				iconCls: 'newtab',
				closable: true,
				layout: 'border',
				//html: '<iframe src="'+url+'"  width="100%" height="100%"/>'
				html:'<iframe id="'+indexId + str+'" frameborder="0" width="100%" height="100%" style="margin:0 0 0 0; padding:0 0 0 0;" src="'
							+url+'"></iframe>'
				//autoLoad : {url:url, scripts:true}
				//items: obj
			}).show();*/
		}else{
			//obj.getUpdater().update(url); 
			obj.show();
		}
		showCurrentActiveTabs();
		tabs.setActiveTab(obj);
		indexId = "new_tab_id_";
	}
	
	function showCurrentActiveTabs(){
		
	}
		
	var tabs = new Ext.TabPanel({
		region: 'center',
        deferredRender: false,
		resizeTabs:true,
        activeTab: 0,
		minTabWidth: 135,
        enableTabScroll:true,
		activeTab: 0,
		margins : '3 3 3 0',
        plain:true,
        frame:true,
        defaults:{autoScroll: true, closable: true},
        items:[{
			contentEl: 'center2',
			title: 'API Home',
			closable: false,
			iconCls: 'newtab'
		}]
    });
		
	tabs.on('beforedestroy', function(tab) {
		    tabs.remove(tab,false);
		    tab.hide();
		    return false;
	});

 

 现在把userDataGrid.jsp通过tabpanel加载进来后，如图：ext_main.bmp所示, 出现了2个问题：

1. grid工具栏上的按钮和分页按钮都不能正常使用了，点按钮：add, remove, search都没有反应；

2. grid怎么样可以填充满整个TabPanel？

 

请高手们多多指教,谢谢！