var tbar2 = new Ext.Toolbar({
// renderTo : grid4.tbar,
items : [{
text : 'text1',
tooltip : 'information1',
iconCls : 'option',
handler : query
}, '-', {
text : 'text1',
tooltip : 'information1',
iconCls : 'save',
handler : show
}]
});
var grid4 = new Ext.grid.GridPanel({
id : 'button-grid',
region : 'center',
title : '',
iconCls : 'icon-grid',
store : estore,
autoScroll : true,
cm : cm,
tbar : new Ext.Toolbar({
autoWidth : true,
autoShow : true,
items : [{
text : 't1',
tooltip : 'tip1',
iconCls : 'option',
handler : reloadstore
}, '-', {
text : 't2',
tooltip : 'tip2',
iconCls : 'option',
handler : closetime
}]
}),
listeners : {
'render' : function() {
tbar2.render(this.tbar); // add tbar
}
},
viewConfig : {
forceFit : true
},
bbar : new Ext.PagingToolbar({
displayInfo : true,
beforePageText : '页 ',
afterPageText : ' 共 {0} 页',
firstText : '第一页 ',
prevText : '前一页',
nextText : '下一页',
lastText : '最后一页',
refreshText : '刷新',
pageSize : 18,
store : etstore,
displayMsg : '显示第 {0} 到 {1} 条 , 共 {2} 条记录',
emptyMsg : "没有记录"
})
});
需要注意:
listeners : {
'render' : function() {
tbar2.render(this.tbar); // add tbar
}
},
分享到:
相关推荐
首先在Ext.grid.GridPanel中必须要有tbar对象 然后要增加listeners: { ‘render’: function() { bbar2.render(this.tbar); //add one tbar //twoTbar.render(this.tbar); //add two tbar // threeTbar.render(this....
### Ext_Js分页显示案例详解 #### 一、引言 在Web开发领域,Ext_Js(简称ExtJS)是一种强大的JavaScript库,用于构建复杂的客户端应用。它提供了一套丰富的UI组件,使得开发者能够轻松地创建美观且功能强大的用户...
displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条。', emptyMsg:'没有记录' }); //有参数的分页 Ext.PagingToolbar.prototype.doLoad=function(start){ findParams.start = start; this.store....
13. **tbar** 和 **bbar** - 分别用于设置组件顶部和底部的工具栏。 14. **store** - 关联数据存储,常用于Grid Panel等组件显示数据。 15. **columns** - Grid Panel的列定义,包括字段名、宽度、对齐方式等。 ...
可绑定tbar ,按钮简单方便new Ext.ux.ToolbarKeyMap() keyBinding : { key :key, ctrl:true }即可
它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示行号、列汇总以及单元格编辑等功能。`GridPanel` 类继承自 `Panel` 类,并且它的 `xtype` 为 `grid`。 要创建一个 `GridPanel`,首先需要定义列信息...
tbar: [ { text: "add" }, "-", { text: "update" }, "-", { text: "delete" } ], enableColumnMove: false, columns: [ { header: "Name", menuDisabled: true, dataIndex: "name" }, { header: "Age", ...
Panel由五个主要部分组成:body(主区域)、tbar(顶部工具栏)、bbar(底部工具栏)、header(面板头部)和bottom(面板尾部)。每个部分都可以自定义内容和样式,增强了界面的可定制性。 在Panel中填充内容的方式...
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学习 #### 一、事件处理 在ExtJS中,事件处理是非常核心的一个功能,它可以帮助开发者轻松地实现用户界面的交互性。通过给特定的DOM元素绑定事件监听器,我们可以让应用根据用户的动作(比如点击按钮)来...
此外,GridPanel的顶部工具栏(tbar)包含了两个按钮,一个是“添加人员”,另一个是“修改人员”。点击“添加人员”按钮会显示 `InsertPersonInfoWindow`,而点击“修改人员”按钮则会显示 `UpdatePersonInfoWindow...
TreeView是下拉框展开后显示的部分,可以通过配置它的columns、tbar(顶部工具栏)等属性来定制其外观和行为。 6. **监听事件**: 为了响应用户的交互,如选择节点或关闭下拉框,需要监听相关的事件,如'select'...
在讨论ExtJS框架时,我们经常涉及到面板(panel)的设计和配置,其中tbar(top bar,顶部工具栏)是一个重要的UI组件,它位于面板的顶部,用于放置各种控件,比如按钮、搜索框、下拉列表等。而在ExtJS中,bbar...
布局决定了组件如何在容器中排列和显示。以下是从给定代码片段中提取的EXT布局相关的重要知识点: 1. **Viewport布局**: - `Ext.Viewport` 是EXTJS中的一个全局对象,用于全屏布局,它会占据浏览器的整个视口。 ...
10. `bbar/tbar`:分别表示底部和顶部的状态栏。 11. `bufferResize`:在容器重新布局时的缓冲频率,以减少不必要的渲染。 12. `colModel/cm`:定义表格列的模式和行为。 13. `cls`:附加的CSS类,用于自定义组件...
12. **tbar**和**bbar**: 分别用于定义FieldSet顶部和底部的工具栏,可以是Ext.Toolbar实例、工具栏配置对象或按钮配置项数组。 13. **header**和**footer**: 分别控制是否创建FieldSet的头部和底部元素。如果不...
11. **tbar** 和 **bbar**:这两个配置用于定义 FieldSet 顶部和底部的工具栏。可以是 `Ext.Toolbar` 实例、工具栏配置对象或按钮配置项数组。注意,一旦渲染完成,不应直接修改这些属性,而应该使用 `getTopToolbar...