Ext4.1 tbar换行

 ext4.1 tbar 换行

 

    使用 buttongroup

效果图:

代码:

 

var tbar1=Ext.create('Ext.toolbar.Toolbar', {
				enableOverflow:true,
				items:[{ //
			            xtype: 'buttongroup',
			            columns: 6, 
			            floatable:true,
			            defaults: {
			                scale: 'small'
			            },
			            items: [{
							xtype : 'textfield',
							fieldLabel : '用户名',
							labelWidth:50,
							id:'select_username',
							width : 180,
							emptyText : '请填写用户名'
						}, {
							xtype : 'textfield',
							fieldLabel : '订单号',
							labelWidth:50,
							id:'select_orderId',
							width : 180,
							emptyText : '请填写订单ID'
						},{
							xtype : 'datefield',
							id : 'select_stime',
							width : 180,
							labelWidth:80,
							format: 'Y-m-d',
							fieldLabel : '开始时间',
							emptyText : '请输入开始时间'
						}, {
							xtype : 'datefield',
							id : 'select_etime',
							width : 180,
							labelWidth:80,
							fieldLabel : '结束时间',
							format: 'Y-m-d',
							emptyText : '请输入结束时间'
						}
	}] 
			});

 

每行显示6个，多余自动换行。