ext3.0 中tbar日期控件掩盖了后面的文本控件，如何解决

0 0

ext3.0 中tbar日期控件掩盖了后面的文本控件，如何解决5

Ext.onReady(function(){
			var vp_title = {
				region:'north',
				html: '<h1 class="x-panel-header"><span style="font-size:14px">主题邮件管理</span></h1>',
				autoHeight:true,
				border:false
			};
			var vp_nav = {
				region:'west',
				title:'导航',
				xtype:'treepanel',
				width:200,
				autoScroll:true,
				minSize:75,
				maxSize:250,
				cmargin:'5 0 0 0',
				//loader: new Ext.tree.TreeLoader(),
				root: new Ext.tree.AsyncTreeNode({
					expanded:true,
					children:[{
						text:'邮件列表',
						leaf:true
					},{
						text:'人员列表',
						leaf:true
					},{
						text:'组列表',
						leaf:true
					}]
				}),
				rootVisible:false,
				listeners:{
					click:function(n){
						if(n.attributes.text == "邮件列表"){
							Ext.getCmp('vp_mainid').layout.setActiveItem(1);
							//context_store.load();
						}
						//Ext.Msg.alert('Navigation Tree Click','You clicked:"' + n.attributes.text + '"');
					}
				}
			};
			var start = {
				id: 'start-panel',
				title: '欢迎使用',
				layout: 'fit',
				bodyStyle: 'padding:25px',
				html:'<img src="images/bg.jpg"/>'
			};
			
			var context_store = new Ext.data.Store({
				url: 'context.jsp',
				reader: new Ext.data.JsonReader({
					root: 'rows',
					totalProperty: 'results',
					id: 'contentPK'
				},[
					'contentPK',
					'msgPK',
					'madePersonPK',	
					'madePersonName',	
					'madeDate',	
					'subject',	
					'content',	
					'attachmentNo',	
					'remoteAddr',	
					'personNamesOfNeedReply',	
					'personNamesOfNotReply'
				])
			});	
			
			
			var context_grid_v = new Ext.grid.GridPanel({
				title:'回复列表',
				id : 'context-grid',
				//xtype: 'grid',
				frame: false,
				//width:300,
				store: context_store,
				region: 'center',
				columns: [
					{header: 'ContentPK', dataIndex: 'contentPK',sortable: true},
					{header: 'msgPK', dataIndex: 'msgPK',sortable: true},
					{header: '主题', dataIndex: 'subject',sortable: true},
					{header: '内容', dataIndex: 'content'},
					{header: '写信人', dataIndex: 'madePersonName'},
					{header: '写信日期',dataIndex: 'madeDate', sortable: true},
					{header: 'IP地址', dataIndex: 'remoteAddr'},
					{header: '收件人(要回)', dataIndex: 'personNamesOfNeedReply'},
					{header: '收件人', dataIndex: 'personNamesOfNotReply'}
				],
				stripeRows: true,
				sm: new Ext.grid.RowSelectionModel({
					singleSelect: true
				}),
				tbar:[' ', '写信日期：'
					, {
			        	xtype: 'datefield'
			        }, ' ',
					'写信人：',
					{
						xtype:'textfield',
						width:70
					},' ',{
						xtype:'button',
						text:'查询'
				}],
				bbar: new Ext.PagingToolbar({
					pageSize: 20,
					store: context_store,
					displayInfo: true,
					
				})
			});		
			var v_context = {
				title:'回复列表',
				region:'center',
				html:'ttt',
				tbar:[' ', '写信日期：'
					, {
			        	xtype: 'datefield'
			        }, ' ',
					'写信人：',
					{
						xtype:'textfield',
						width:70
					},' ',{
						xtype:'button',
						text:'查询'
				}]
			};
			var v_message = {
				title:'邮件',
				region:'south',
				height:250,
				html:'sss'
			};
			var context_v = {				
				layout:'border',
				defaults:{
					border:false
				},
				items:[v_context,v_message]
			};
			var vp_main = {
				id: 'vp_mainid',
				region: 'center',
				layout: 'card',
				activeItem: 0,
				defaults:{
					border:false
				},
				items: [start,context_v]
			};
			
			var vp = new Ext.Viewport({
				layout:'border',
				defaults:{
					collapsible:true,
					split:true
				},
				items:[vp_title,vp_nav,vp_main]
			});
		});

写信日期控件完全盖住写信人，那出错了？效果如图

问题补充：谢谢babydeed，但是

Ext.onReady(function(){
                Ext.BLANK_IMAGE_URL = 'images/s.gif';
                Ext.QuickTips.init();
                var v_context = {
					title:'回复列表',
					region:'center',
					html:'ttt',
					tbar:[' ', '写信日期：'
						, {
				        	xtype: 'datefield'
				        }, ' ',
						'写信人：',
						{
							xtype:'textfield',
							width:70
						},' ',{
							xtype:'button',
							text:'查询'
					}]
				};
				var v_message = {
					title:'邮件',
					region:'south',
					
					html:'sss'
				};
				var context_v = {				
					layout:'border',
					defaults:{
						border:false
					},
					items:[v_context,v_message]
				};
				var panel = new Ext.Viewport({
					
					layout:'border',
					defaults:{
						border:false
					},
					items:[v_context,v_message]
				});
				
        });

这种布局下又是正常的。你的办法应该不是最好的。

JavaScript EXT

2010年9月09日 11:23

weitd
25
0 1 1

查看图片附件

2个答案按时间排序按投票排序

0 0

为什么我直接跑你的程序没发现你的问题呢，我这里用IE，显示是正常的哦~

2010年9月18日 23:12

jxd_zxf
37
0 0 0

添加评论

0 0

tbar:[' ', '写信日期：'
                    , {
                        xtype: 'datefield'
                    },"      ",
                    '写信人：',
                    {
                        xtype:'textfield',
                        width:70
                    },' ',{
                        xtype:'button',
                        text:'查询'
                }],
上面是一个解决方法

2010年9月09日 12:19