`
zhsq_java
  • 浏览: 61709 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

GridPanel动态添加ToolBar

    博客分类:
  • ext
阅读更多
border布局的Panel中的center放了一个GridPanel,我想在GridPanel中放两个toolbar,其中一个是默认的,一个是扩展的,扩展的默认为隐藏,点击默认toolbar上的一个按钮时显示扩展toolbar,
下面是代码:
两个toolbar,一个隐藏:
			tbar : toolBar,
			listeners : {
				render : function() {
					toolBar2.render(this.tbar);
					toolBar2.hide();
				},
				destroy : function() {
					Ext.destroy(toolBar2);//这一句不加有能会有麻烦滴
				}
			},

点击按钮的时候,显示或隐藏扩展toolbar:
		var btnSel = new Ext.SplitButton({
			text : "查找",
			// style : 'margin:0 10 4 30',
			iconCls : 'search',
			handler : searchCoalPlace,
			tooltip : {
				text : '查找',
				autoHide : true
			},
			arrowHandler : function() { 
				if (toolBar2.hidden) {
					toolBar2.show();
					cpGrid.syncSize();  //重新计算高度
					subPanel.doLayout();//容器重新布局
				} else {
					toolBar2.hide();
					cpGrid.syncSize();//重新计算高度
				subPanel.doLayout();//容器重新布局
				}
			}
		});
分享到:
评论
1 楼 liangwind 2013-11-20  
 

相关推荐

    extjs4.2 动态生成toolbar

    在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...

    gridPanel添加按钮

    在本话题中,我们讨论的是如何在`gridPanel`中添加按钮,这涉及到前端用户界面的设计和交互。`gridPanel`在诸如ExtJS、GWT或PrimeFaces等框架中常见,它们提供了丰富的功能来处理表格数据,包括排序、筛选、分页等。...

    Extjs中的GridPanel

    用户可以添加、编辑和删除 GridPanel 中的数据行。通过配置编辑器(editors)和工具栏(toolbar)可以实现这些操作。 7. **行选择模式**: GridPanel 支持多种行选择模式,如单选、多选和全选。配合 ...

    ExtJS介绍以及GridPanel

    5. 渲染GridPanel:将GridPanel添加到容器中,完成渲染。 在实际应用中,GridPanel还可以与其他组件结合,比如使用Toolbar提供操作按钮,或者嵌入其他复杂的组件,如Charts,以实现数据分析和可视化。 除了...

    ExtJs GridPanel 操作

    此外,GridPanel还支持各种工具栏(toolbar)和分页条(paging toolbar),可以添加按钮、下拉框等元素,方便用户操作。例如,添加分页条的代码如下: ```javascript dockedItems: [{ dock: 'bottom', xtype: '...

    ExtJS4.0下的gridPanel组建完全版

    Columns可以通过`xtype`属性设置不同类型的列,如文本列、数字列、日期列等,还可以添加自定义渲染函数来实现特定的数据显示效果。 4. **View**:View是GridPanel的视图层,负责将Store中的数据渲染到页面上。它...

    无废话ExtJs 系统教程十四[列表:GridPanel]

    例如,通过添加插件可以实现行选择模式(单选或多选)、分页栏(Pagination Toolbar)、工具栏(Toolbar)以添加自定义按钮,甚至编辑功能(Inline或Cell Editing)。另外,GridPanel可以与TreePanel结合,形成一个...

    extjs gridpanel例子和简单应用

    本文将通过一个具体的例子来详细介绍ExtJS中`GridPanel`的基本用法以及如何利用`HttpProxy`、`JsonReader`、`Store`等关键对象来构建动态数据展示界面。 #### 二、核心概念介绍 1. **HttpProxy** - `HttpProxy`是...

    扩展GridPanel,附带分页选中状态,实现快速构建一个功能齐全的Grid

    分页工具栏可以通过`Ext.create('Ext.toolbar.Paging', {...})`创建,并添加到GridPanel的底部。同时,需要确保数据源(通常是`Ext.data.Store`)支持分页,如设置`proxy`的`reader`和`writer`来处理分页请求。 3. ...

    ExtAspNet GridPanel的一般用法

    添加" Icon="Add"> 首页" OnClick="btnToHome_Click" Icon="House"> </ext:Toolbar> ``` - **ext:Button**:用于创建工具栏上的按钮。 - **Text**:按钮的文本。 - **Icon**:按钮的图标。 - **...

    extjs&使用grid显示数据参照.pdf

    分页功能则可以通过配置GridPanel的paging toolbar来实现,这样用户可以轻松浏览大量数据。 总的来说,EXTJS的GridPanel结合data store和reader,为开发人员提供了强大而灵活的数据展示工具,能够适应各种业务需求...

    JavaScript的Ext JS框架中的GridPanel组件使用指南

    然后,添加Paging Toolbar到Grid Panel: ```javascript Ext.create('Ext.grid.Panel', { ... dockedItems: [{ xtype: 'pagingtoolbar', store: userStore, // 绑定到相同的数据源 dock: 'bottom', ...

    extjs前台分页插件PagingStore!

    6. **添加PagingToolbar**:在GridPanel下方添加PagingToolbar,设置其store属性为PagingStore实例。 示例代码: ```javascript var store = new Ext.data.PagingStore({ proxy: { type: 'ajax', url: 'get-data...

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

    总之,EXTJS的GridPanel结合Toolbar组件,可以很好地解决多行查询的需求,通过动态添加和布局,能够创建出直观、易用的查询界面,提升应用的交互性和实用性。开发者可以根据具体业务场景和用户需求,进一步定制和...

    Ext增删改查和excel导出

    创建一个简单的GridPanel,并添加增删改查功能: ```javascript var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'api/users' } }); var grid = Ext.create('...

    ExtJS4 doc文档

    `Toolbar`可以根据需要动态添加、移除或排列组件,使其在各种场景下都非常灵活。 除了上述核心组件,ExtJS4还包括丰富的其他组件,如窗体(form)、图表(charts)、对话框(dialogs)、布局(layouts)等,它们...

    Ext经典例子整合 快速上手必看

    通过配置项可以自定义其样式和布局,同时可以添加事件监听器实现特定功能。 3. **TabPanel**: TabPanel是EXTJS中的一个容器组件,它允许你在同一区域内展示多个视图,并通过标签页进行切换。每个标签页都是一个...

    extjs+php分页例子

    6. **自定义分页栏**:如果需要自定义分页栏的样式或行为,可以创建一个Ext.toolbar.Paging实例,并添加到GridPanel的底部。通过监听`beforechange`或`changepage`事件,可以实现额外的功能,比如在切换页面前进行...

Global site tag (gtag.js) - Google Analytics