ext 弹出 选项卡 框出现的问题，弹出框了，没内容显示。附代码。急！

   我的实现思路大概是这样的，先做面板，把Ext.FormPanel加载到Ext.TabPanel中，再把Ext.TabPanel加载到Ext.Window窗体中。
    但是显示出来的窗体有选项卡项目，选项卡项目中没有内容。

Ext.namespace("Emailsys.Email.Customer");
/*******************************************************************************
 * 港口选择弹出窗体
 * 
 * @class Emailsys.Email.Customer.SeaportPropWin
 * @extends CPC.BasePropForm
 */
Emailsys.Email.Customer.BbsTitles = Ext.extend(CPC.BasePropForm, {
			bizObj : null,
			height : 550,
			width : 700,
			relationName : '',
			pkFieldName : '',
			bizObjClass : '',
			showApplyButton : false,
			createWin : function() {
				//_this = this;
				this.commrulePanel = new Emailsys.Email.Customer.Email_Commrule(
						{
							owner : this
						});
				this.win = new Ext.Window(this.applyCfg(this.winCfg, {
					        scope : this,
							width : this.width,
							height : this.height,
							modal : true,
							resizable : false,
							title : '论坛标题',
							bodyStyle : 'padding:5px',// 表单边距
							// items : this.content.getPanel(),
							items : this.commrulePanel.getPanel(),
						    closeAction : 'hide'		
						}));
			},
			showObj : function() {
			},
			save : function() {
			},
			saveInformation : function(bizObj) {
			},
			afterSave : function(bizObj, action) {
			},
			afterAfterSave : function() {
			},
			destory : function() {
				this.content = null;
				Emailsys.Email.Customer.BbsTitles.superclass.destory.call(this);
			},
			init : function() {
				Emailsys.Email.Customer.BbsTitles.superclass.init.call(this);
			}
		});

/**
 * 选项卡：常规栏
 */
Emailsys.Email.Customer.Email_Commrule = Ext.extend(CPC.BaseForm, {
			bizObj : null,
			height : 500,
			width : 600,
			bizObjClass : 'email_country',
			idFieldName : 'countryid',
			createEditorPanel : function() {
				this.tf_subject = new Ext.form.TextField({
							xtype : 'textfield',
							fieldLabel : '主题',
							width : 420,
							labelStyle : 'text-align:left',
							name : 'subject',
							allowBlank : true
						});
				this.tf_bbs_style = new Ext.form.TextField({
							xtype : 'textfield',
							fieldLabel : '论坛类型',
							width : 150,
							disabled : true,
							emptyText : '公告',
							labelStyle : 'text-align:left',
							name : 'bbs_style',
							allowBlank : true
						});
				this.tf_manager = new Ext.form.TextField({
							xtype : 'textfield',
							fieldLabel : ' 负责人',
							width : 150,
							labelStyle : 'text-align:right',
							name : 'manager',
							allowBlank : true
						});
				this.tf_duedate = new Ext.form.TextField({
							xtype : 'textfield',
							fieldLabel : '过期日期',
							width : 150,
							labelStyle : 'text-align:left',
							name : 'duedate',
							allowBlank : true
						});
				this.tf_choice = new Ext.form.Checkbox({
					hideLabel : true, // 隐藏选框前面的标题部分
					disabled : true, // 禁用
					value : '',
					labelStyle : 'text-align:right',
					boxLabel : '通知所有人',
					checked : true
						// 自选中
					})
				this.tf_content = new Ext.form.TextArea({
							xtype : 'textfield',
							fieldLabel : '内容',
							width : 420,
							height : 300,
							labelStyle : 'text-align:left',
							name : 'content',
							allowBlank : true
						});
				this.editorPanel = new Ext.FormPanel(this.applyCfg(
						this.editorPanelCfg, {
							title : '常规',
							border : false,
							frame : false,// 面板边框
							labelWidth : 80,
							autoHeight : true,
							autoShow : true,
							tbar : this.toolBar,
							items : [{
										layout : 'form',
										items : this.tf_subject
									}, {
										layout : 'column',
										border : false,
										items : [{
													columnWidth : 0.48,
													// labelWidth : 80,
													layout : 'form',
													items : this.tf_bbs_style
												}, {
													columnWidth : 0.48,
													layout : 'form',
													items : this.tf_manager
												}]
										// [this.tf_bbs_style,this.tf_manager]
								}	, {
										layout : 'column',
										border : false,
										items : [{
													columnWidth : 0.68,
													// labelWidth : 80,
													layout : 'form',
													items : this.tf_duedate
												}, {
													columnWidth : 0.28,
													layout : 'form',
													items : this.tf_choice
												}]
									}, {
										layout : 'form',
										items : this.tf_content
									}]
						}));
			},

				createPanel : function() {
				// this.panel = this.searchPanel;
					this.panel = new Ext.TabPanel(this.applyCfg(this.tabCfg, {
							// 在这里写入包含对象的属性，如tbar，store，items或者自己的配置
							border : false,
							region : 'center',
							items : this.editorPanel
//							listeners : {
//								scope : this,
//								'tabchange' : function(tabPanel, tab) {
//									if (tab.title == '项目成员') {
//									}
//								}
//							}
						}));

			},			
			// 显示
			showObj : function(bizObj) {
			},
			search : function() {
			},
			save : function() {
			},
			invalidate : function(errMsg) {
			},
			getPanel : function() {
				return this.panel;
			},

			destory : function() {
				this.editorPanel = null;
				this.panel = null;
				Emailsys.Email.Customer.Email_Commrule.superclass.destory
						.call(this);
			},
			init : function() {
				Emailsys.Email.Customer.Email_Commrule.superclass.init.call(this);
				this.createEditorPanel();
				this.createPanel();
			}
		}); 

6 个解决方案

#1

/**
 * 国家查询
 */
Emailsys.Email.Customer.Email_Country = Ext.extend(CPC.BaseComboForm, {
	relationName : 'email_country', // 关联对象
	bizObjClass : 'email_country', // java类名
	action : 'search', // 请求的后台方法
	pageSize : 20, // 分页显示
	selectFirstRow : false,// 是否选中第一行
	searchWhenRender : false,// 是否开始就查询,
	genRowNum : true,// 是否显示行标
	owner : null,
	createPropFormAlways : true, // 此属性设为true才能在双击表格中的行时弹出窗体
	createCurrentPropForm : function() {
		this.updateData = new Emailsys.Email.Customer.BbsTitles({
					owner : this
				});
	},
	// 创建网格
	createSearchGridPanel : function() {
		var _this = this;
		var checkModel = new Ext.grid.CheckboxSelectionModel();
		var columns = [new Ext.grid.RowNumberer(), checkModel, {
					header : "国家名称",
					width : 200,
					dataIndex : 'countryname',
					sortable : true
				}, {
					header : "国家编码",
					width : 100,
					dataIndex : 'countrycode',
					sortable : true
				}, {
					header : "英文名称",
					width : 100,
					dataIndex : 'engname',
					sortable : true
				}, {
					header : "备注",
					width : 100,
					dataIndex : 'note',
					sortable : true
				}, {
					header : "是否有效",
					width : 100,
					dataIndex : 'isinvalid',
					sortable : true
				}, {
					header : "所属区域",
					width : 100,
					dataIndex : 'region',
					sortable : true
				}];
		// 创建数据源，要隐藏的数据
		this.createSearchStore(columns, [{
							dataIndex : 'countryid',
							hidden : true
						}]);
		// 创建容器，包含网格
		this.searchGridPanel = new Ext.grid.GridPanel(this.applyCfg(
				this.searchGridPanelCfg, {
					// 在这里写入包含对象的属性，如tbar，store，columns或者自己的配置
					lines : false,
					enableHdMenu : false, // 不显示head 的menu
					bBase : false,
					frame : false,
					trackMouseOver : false,
					store : this.searchStore, // 加载数据源
					cm : new Ext.grid.ColumnModel(columns),// 加载字段（要显示的）
					sm : checkModel, // 包含复选框
					viewConfig : {
						forceFit : true
						// 网格视图自动调适
					},
					bodyStyle : 'width:100%',
					autoHeight : false, // 不会出现滚动条
					labelAlign : 'left', // 文本对齐方式
					closable : false,
					stripeRows : true, // 斑马线
					region : 'center', // 区域，位置
					tbar : this.toolBar, // 头部工具按钮
					bbar : new Ext.PagingToolbar({ // 分页
						store : this.searchStore,
						pageSize : this.pageSize,
						displayInfo : true
					}),
					viewConfig : {
						onLoad : Ext.emptyFn,
						listeners : {
							beforerefresh : function(v) {
								v.scrollTop = v.scroller.dom.scrollTop;
								v.scrollHeight = v.scroller.dom.scrollHeight;
							},
							refresh : function(v) {
								v.scroller.dom.scrollTop = v.scrollTop
										+ (v.scrollTop == 0
												? 0
												: v.scroller.dom.scrollHeight
														- v.scrollHeight);
							}
						}
					},
					listeners : {
						scope : this,
						// 参数function rowdblclick(grid, rowIndex, e)
						rowdblclick : function(grid, rowIndex, e) {
							this.createCurrentPropForm();
							var strCountryCode = grid.store.getAt(rowIndex).data.countrycode;
							var strCountryName = grid.store.getAt(rowIndex).data.countryname;
							var strEngName = grid.store.getAt(rowIndex).data.engname;
							var strNote = grid.store.getAt(rowIndex).data.note;
							var strId = grid.store.getAt(rowIndex).data.countryid;

							this.updateData.country_id = strId;
							this.updateData.country_code = strCountryCode;
							this.updateData.country_name = strCountryName;
							this.updateData.eng_name = strEngName;
							this.updateData.notes = strNote;
							this.updateData.showWin();
						}
					}

				}));
	},
	// 创建按钮
	createButtons : function() {
		var _this = this;
		this.tf_countryname = new Ext.form.TextField({
					fieldLabel : '请输入国家名称',
					emptyText : '请输入国家名称',
					name : 'countryname',
					allowBlank : true,
					width : 200
				});
		this.tf_engname = new Ext.form.TextField({
					fieldLabel : '请输入国家英文名称',
					emptyText : '请输入国家英文名称',
					width : 200,
					name : 'engname',
					allowBlank : true
				});
		// 创建 查询/搜索 按钮
		this.tb_Search = new Ext.Button({
					text : '搜索',
					tooltip : '',
					scope : this,
					handler : function() {
						this.search();
					},
					iconCls : 'cpc-tb-search'
				});
		this.tb_Add = new Ext.Button({
					text : '新增',
					tooltip : '',
					scope : this,
					handler : function() {
						this.createCurrentPropForm();// 重新实例化
						this.updateData.showWin();
					},
					iconCls : 'cpc-add'
				});
		// 创建文本框，查询按钮，添加按钮，导出Excel按钮
		Emailsys.Email.Customer.Email_Country.superclass.createButtons
				.call(this);
		this.toolBar = [this.tf_countryname, '-', this.tf_engname, '-',
				this.tb_Search, '-', this.tb_Add, '-', this.tbDel];
	},
	// 根据条件查询信息（在下面的查询方法中调用到）
	saveInformation : function(bizObj) {
		// debugger;
		bizObj.countryname = this.tf_countryname.getValue(); // 为对象赋值,按名字查询
		bizObj.engname = this.tf_engname.getValue();
		Emailsys.Email.Customer.Email_Country.superclass.saveInformation.call(
				this, bizObj);
	},
	// 创建面板
	createPanel : function() {
		this.panel1 = this.searchGridPanel;
	},
	getStore : function() {
		return this.searchStore;
	},
	// 获取面板
	getPanel : function() {
		return this.panel1;
	},
	// 查询方法（点击“查询”或“搜索” 按钮时调用到）
	search : function() {
		var errMsg = new Ext.ux.StringBuilder('');
		this.invalidate(errMsg);
		errMsg = errMsg.toString();
		if (errMsg.length > 0) {
			CPC.showMsg(errMsg);
		} else {
			// debugger;
			var obj = CPC.createBizObj(this.bizObjClass);
			// 调用（本页）条件查询方法
			this.saveInformation(obj);
			this.searchStore.removeAll();
			// 禁用搜索按钮,在网络慢的情况下,防止用户多次点击
			if (this.tbSearch)
				this.tbSearch.disable();
			this.searchStore.load({
						params : {
							bizobj : obj,
							action : this.action,
							start : 0,
							limit : this.pageSize
						}
					});
		}
	},
	// 删除函数
	deleteBill : function() {
		if (this.searchGridPanel.selModel.getCount() > 0) {
			Ext.MessageBox.confirm("请确认", "<br/>真的要删除所选择的列？", function(button,
							text) {
						if (button == "yes") {
							var array = this.searchGridPanel.selModel
									.getSelections();
							var ids = ''
							for (var i = 0; i < array.length; i++) {
								if (i == (array.length - 1)) {
									ids += array[i].data.countryid; // 获取单个ID
								} else {
									ids += array[i].data.countryid + ',';// 获取多行ID
								}
							}
							// var obj = CPC.createBizObj(this.bizObjClass);
							var obj = new email_country();// Java类对象
							obj.countryid = ids;
							this.requestEx({
										bizobj : obj,
										action : 'delete',
										success : this.processSuccess,
										failure : this.processFailure
									});
						}
					}, this);
		}
	},
	processSuccess : function(bizobj, xmldoc, action) {
		if ("delete" == action) {
			CPC.showMsg("删除成功");
			this.search();
		}
	},
	processFailure : function(bizobj, xmldoc, action) {
		if ("delete" == action) {
			CPC.showMsg("失败");
		}
	},
	// 双击表格行时将当前行数据传递给下一个窗体
	onDBClick : function(grid, rowIndex, e) {
		// var record = grid.getStore().getAt(rowIndex);//获取选中网格行的Id
		// CPC.objToForm(record.data, this.propForm.contentPanel);
		// this.propForm.showWin();
	},
	// 初始化方法
	init : function() {
		Emailsys.Email.Customer.Email_Country.superclass.init.call(this);
		this.createCurrentPropForm();
	},
	// 销毁
	destroy : function() {
		Emailsys.Email.Customer.Email_Country.superclass.destroy.call(this);
	}
});

#2

做了个简单的例子
Ext.define('MyApp.view.ui.MyWindow', {
    extend: 'Ext.window.Window',

    height: 332,
    width: 548,
    title: 'My Window',

    initComponent: function() {
        var me = this;
        me.items = [
            {
                xtype: 'tabpanel',
                activeTab: 0,
                items: [
                    {
                        xtype: 'panel',
                        title: 'Tab 1',
                        items: [
                            {
                                xtype: 'form',
                                height: 271,
                                bodyPadding: 10,
                                title: 'My Form',
                                items: [
                                    {
                                        xtype: 'combobox',
                                        fieldLabel: 'Label',
                                        anchor: '100%'
                                    },
                                    {
                                        xtype: 'textfield',
                                        fieldLabel: 'Label',
                                        anchor: '100%'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'Tab 2'
                    },
                    {
                        xtype: 'panel',
                        title: 'Tab 3'
                    }
                ]
            }
        ];
        me.callParent(arguments);
    }
});

#3

引用 2 楼 chenf_ 的回复:

做了个简单的例子
Ext.define('MyApp.view.ui.MyWindow', {
  extend: 'Ext.window.Window',

  height: 332,
  width: 548,
  title: 'My Window',

  initComponent: function() {
  var me = this;
  me.items ……

这个思路和我那个是一样的啊。只是我的写在外面的，用来调用。你的直接全部写在里面

#4

Tabpanel 设置activeTab: 0, 没有？ 代码太乱了 
看着眼睛好晕哦

#5

用Ext Designer画图，很方便的。我觉得没有必要手工写代码。

#6

问题已经解决了。是有几个tab的属性没有加载。4楼的说对一部分。呵呵。谢谢各位了