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();//容器重新布局
}
}
});
分享到:
相关推荐
在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...
在本话题中,我们讨论的是如何在`gridPanel`中添加按钮,这涉及到前端用户界面的设计和交互。`gridPanel`在诸如ExtJS、GWT或PrimeFaces等框架中常见,它们提供了丰富的功能来处理表格数据,包括排序、筛选、分页等。...
用户可以添加、编辑和删除 GridPanel 中的数据行。通过配置编辑器(editors)和工具栏(toolbar)可以实现这些操作。 7. **行选择模式**: GridPanel 支持多种行选择模式,如单选、多选和全选。配合 ...
5. 渲染GridPanel:将GridPanel添加到容器中,完成渲染。 在实际应用中,GridPanel还可以与其他组件结合,比如使用Toolbar提供操作按钮,或者嵌入其他复杂的组件,如Charts,以实现数据分析和可视化。 除了...
此外,GridPanel还支持各种工具栏(toolbar)和分页条(paging toolbar),可以添加按钮、下拉框等元素,方便用户操作。例如,添加分页条的代码如下: ```javascript dockedItems: [{ dock: 'bottom', xtype: '...
Columns可以通过`xtype`属性设置不同类型的列,如文本列、数字列、日期列等,还可以添加自定义渲染函数来实现特定的数据显示效果。 4. **View**:View是GridPanel的视图层,负责将Store中的数据渲染到页面上。它...
例如,通过添加插件可以实现行选择模式(单选或多选)、分页栏(Pagination Toolbar)、工具栏(Toolbar)以添加自定义按钮,甚至编辑功能(Inline或Cell Editing)。另外,GridPanel可以与TreePanel结合,形成一个...
本文将通过一个具体的例子来详细介绍ExtJS中`GridPanel`的基本用法以及如何利用`HttpProxy`、`JsonReader`、`Store`等关键对象来构建动态数据展示界面。 #### 二、核心概念介绍 1. **HttpProxy** - `HttpProxy`是...
分页工具栏可以通过`Ext.create('Ext.toolbar.Paging', {...})`创建,并添加到GridPanel的底部。同时,需要确保数据源(通常是`Ext.data.Store`)支持分页,如设置`proxy`的`reader`和`writer`来处理分页请求。 3. ...
添加" Icon="Add"> 首页" OnClick="btnToHome_Click" Icon="House"> </ext:Toolbar> ``` - **ext:Button**:用于创建工具栏上的按钮。 - **Text**:按钮的文本。 - **Icon**:按钮的图标。 - **...
分页功能则可以通过配置GridPanel的paging toolbar来实现,这样用户可以轻松浏览大量数据。 总的来说,EXTJS的GridPanel结合data store和reader,为开发人员提供了强大而灵活的数据展示工具,能够适应各种业务需求...
然后,添加Paging Toolbar到Grid Panel: ```javascript Ext.create('Ext.grid.Panel', { ... dockedItems: [{ xtype: 'pagingtoolbar', store: userStore, // 绑定到相同的数据源 dock: 'bottom', ...
6. **添加PagingToolbar**:在GridPanel下方添加PagingToolbar,设置其store属性为PagingStore实例。 示例代码: ```javascript var store = new Ext.data.PagingStore({ proxy: { type: 'ajax', url: 'get-data...
总之,EXTJS的GridPanel结合Toolbar组件,可以很好地解决多行查询的需求,通过动态添加和布局,能够创建出直观、易用的查询界面,提升应用的交互性和实用性。开发者可以根据具体业务场景和用户需求,进一步定制和...
创建一个简单的GridPanel,并添加增删改查功能: ```javascript var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'api/users' } }); var grid = Ext.create('...
`Toolbar`可以根据需要动态添加、移除或排列组件,使其在各种场景下都非常灵活。 除了上述核心组件,ExtJS4还包括丰富的其他组件,如窗体(form)、图表(charts)、对话框(dialogs)、布局(layouts)等,它们...
通过配置项可以自定义其样式和布局,同时可以添加事件监听器实现特定功能。 3. **TabPanel**: TabPanel是EXTJS中的一个容器组件,它允许你在同一区域内展示多个视图,并通过标签页进行切换。每个标签页都是一个...
6. **自定义分页栏**:如果需要自定义分页栏的样式或行为,可以创建一个Ext.toolbar.Paging实例,并添加到GridPanel的底部。通过监听`beforechange`或`changepage`事件,可以实现额外的功能,比如在切换页面前进行...