`

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个,多余自动换行。

 

  • 大小: 15.8 KB
2
0
分享到:
评论
1 楼 wangjingyang2007 2015-04-16  
谢谢,受用了!

相关推荐

    ext 列表页面关于多行查询的办法

    首先在Ext.grid.GridPanel中必须要有tbar对象 然后要增加listeners: { ‘render’: function() { bbar2.render(this.tbar); //add one tbar //twoTbar.render(this.tbar); //add two tbar // threeTbar.render(this....

    extjs两个tbar问题探讨

    在讨论ExtJS框架时,我们经常涉及到面板(panel)的设计和配置,其中tbar(top bar,顶部工具栏)是一个重要的UI组件,它位于面板的顶部,用于放置各种控件,比如按钮、搜索框、下拉列表等。而在ExtJS中,bbar...

    Ext.DataView 图片列表显示

    //得到后台的数据 var proxy = new Ext.data.HttpProxy({ url:showUrl, timeout:3600000 }); //分页参数 findParams ={start:0,limit:limit};... tbar : myTbar, renderTo: 'imageList' });

    Ext常用属性总结

    13. **tbar** 和 **bbar** - 分别用于设置组件顶部和底部的工具栏。 14. **store** - 关联数据存储,常用于Grid Panel等组件显示数据。 15. **columns** - Grid Panel的列定义,包括字段名、宽度、对齐方式等。 ...

    ToolbarKeyMap.js tbar或按钮绑定的快捷键

    可绑定tbar ,按钮简单方便new Ext.ux.ToolbarKeyMap() keyBinding : { key :key, ctrl:true }即可

    Ext表格控件和树控件

    tbar: ['->', { text: '保存所有更改', handler: function() { store.commitChanges(); } }] }); }); ``` 在这个例子中,`EditorGridPanel` 提供了对每个单元格的编辑功能,并且还增加了一个工具栏按钮来...

    Ext 实现自定义控件

    tbar: [ { text: "add" }, "-", { text: "update" }, "-", { text: "delete" } ], enableColumnMove: false, columns: [ { header: "Name", menuDisabled: true, dataIndex: "name" }, { header: "Age", ...

    Ext + dwr 实现分页功能

    tbar: new Ext.PagingToolbar({ pageSize: 20, store: store, displayInfo: true }), renderTo: 'example-grid', width: 600, height: 400 }); store.load({params: {start: 0, limit: 20}}); }); ``` #...

    ext js 培训资料

    Panel由五个主要部分组成:body(主区域)、tbar(顶部工具栏)、bbar(底部工具栏)、header(面板头部)和bottom(面板尾部)。每个部分都可以自定义内容和样式,增强了界面的可定制性。 在Panel中填充内容的方式...

    ext学习

    ### ext学习 #### 一、事件处理 在ExtJS中,事件处理是非常核心的一个功能,它可以帮助开发者轻松地实现用户界面的交互性。通过给特定的DOM元素绑定事件监听器,我们可以让应用根据用户的动作(比如点击按钮)来...

    Ext面向对象开发实践代码第1/2页

    此外,GridPanel的顶部工具栏(tbar)包含了两个按钮,一个是“添加人员”,另一个是“修改人员”。点击“添加人员”按钮会显示 `InsertPersonInfoWindow`,而点击“修改人员”按钮则会显示 `UpdatePersonInfoWindow...

    EXTJS创建提示框、面板、表格建议代码实现

    tbar:[ {text:'新增'},{text:'修改'},{text:'删除'}],//头部工具栏 tools:[{id:'save'},{id:'hlep'}],//顶部工具条 buttons:[{text:'保存',handler:ok},{text:'取消'}]//底部按钮 }); new Ext.dd.DDProxy('base...

    Extjs4 下拉树 TreeCombo

    TreeView是下拉框展开后显示的部分,可以通过配置它的columns、tbar(顶部工具栏)等属性来定制其外观和行为。 6. **监听事件**: 为了响应用户的交互,如选择节点或关闭下拉框,需要监听相关的事件,如'select'...

    搜集来的ext布局材料

    以下是从给定代码片段中提取的EXT布局相关的重要知识点: 1. **Viewport布局**: - `Ext.Viewport` 是EXTJS中的一个全局对象,用于全屏布局,它会占据浏览器的整个视口。 - 在示例中,`viewport` 的布局有两种...

    Ext.form.FieldSet的用法.pdf

    11. **tbar** 和 **bbar**:这两个配置用于定义 FieldSet 顶部和底部的工具栏。可以是 `Ext.Toolbar` 实例、工具栏配置对象或按钮配置项数组。注意,一旦渲染完成,不应直接修改这些属性,而应该使用 `getTopToolbar...

Global site tag (gtag.js) - Google Analytics