`
放羊的老狼
  • 浏览: 11924 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ext中显示多行bbar/tbar

阅读更多
<script type="text/javascript">
Ext.onReady(function(){
    var oneTbar = new Ext.Toolbar({
        items: ['开始时间',{   
			xtype:'datefield',
			id : 'startDate',
			editable:false,
			height:20,
			format:'Y-m-d'
		},{
			text:'清空',
			handler:function(){
						Ext.getCmp("startDate").setValue("");
					}
		}]
    });
    var twoTbar = new Ext.Toolbar({
        items: ['结束时间',{
			xtype:'datefield',
			id : 'endDate',
			editable:false,
			height:20,
			format:'Y-m-d'
		},{
			text:'清空',
			handler:function(){
						Ext.getCmp("endDate").setValue("");
					}
		}]
    });
	var w = new Ext.Window({
		title:"消息",
       	width:520,
      	height:500,
      	layout: "anchor",
       	buttonAlign:"center",
       	tbar:{
       		xtype: 'container',
        	items: [oneTbar,twoTbar]
       	},
		bbar: {
       		xtype: 'container',
        	items: [oneTbar,twoTbar]
    	}
	});
	w.show();
});
</script>
  • 大小: 95.8 KB
分享到:
评论

相关推荐

    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....

    ext扩展异步分页bbar

    自己扩展的异步分页bbar,对大数据量表的查询很有帮助

    ext表格布局小例子

    &lt;script src="ext-3.2.1/adapter/ext/ext-base.js"&gt;&lt;/script&gt; &lt;script src="ext-3.2.1/ext-all.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="ext-3.2.1/src/locale/ext-lang-zh_CN.js"&gt;&lt;/script&gt; ...

    Ext.DataView 图片列表显示

    displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条。', emptyMsg:'没有记录' }); //有参数的分页 Ext.PagingToolbar.prototype.doLoad=function(start){ findParams.start = start; this.store....

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    同时,还可以通过tbar、bbar、buttons等配置项来添加顶部和底部工具栏按钮,以及面板中的按钮。例如: ```javascript var panel = new Ext.Panel({ renderTo: 'panel', title: '面板的头部', width: 400, height...

    extgrid属性[文].pdf

    10. `bbar/tbar`:分别表示底部和顶部的状态栏。 11. `bufferResize`:在容器重新布局时的缓冲频率,以减少不必要的渲染。 12. `colModel/cm`:定义表格列的模式和行为。 13. `cls`:附加的CSS类,用于自定义组件...

    Ext表格获取后台数据

    Ext.grid.GridPanel是一个功能强大的表格控件,它可以显示大量数据,并且提供了许多自定义的选项,例如分页、排序、过滤等。 在ExtJS中,表格控件对性能的要求较高,特别是在显示大量数据时。如果不使用分页机制,...

    Ext常用属性总结

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

    ext TreeGrid分页可编辑

    在Web应用开发中,特别是涉及到复杂数据展示的应用场景中,`Ext TreeGrid`是一种非常实用且灵活的数据展示组件,它结合了树形结构与表格的形式来呈现数据,非常适合展示具有层次关系的数据集合。本文主要探讨如何...

    Ext-window属性

    在支持一次仅显示一个子组件的布局中,如`Ext.layout.Accordion`、`Ext.layout.CardLayout`和`Ext.layout.FitLayout`,这个属性特别有用。 2. **allowDomMove**: 默认值为`true`,表示在组件渲染过程中允许移动DOM...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    bbar: new Ext.PagingToolbar({ store: store, // 关联数据存储 displayInfo: true, // 显示当前页和总页数 pageSize: 25 // 每页记录数 }) }); ``` 在这个例子中,我们创建了一个使用DWRProxy的Store,...

    搜集来的ext布局材料

    布局决定了组件如何在容器中排列和显示。以下是从给定代码片段中提取的EXT布局相关的重要知识点: 1. **Viewport布局**: - `Ext.Viewport` 是EXTJS中的一个全局对象,用于全屏布局,它会占据浏览器的整个视口。 ...

    ext学习

    代码注释中提到的“Ext.get("btnAlert")得到一个与页面中按钮btnAlert关联的Ext.Element对象”实际上是指,`Ext.get`返回的对象是对DOM元素的一种封装,即`Ext.Element`对象。这种对象提供了更多的方法和属性,以便...

    ext js 培训资料

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

    Ext实现分页查询,前台

    在IT行业中,分页查询是常见的数据展示方式,特别是在网页应用中,为了提高用户体验和页面加载速度,通常会将大量数据分成多个部分(页)进行加载。本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的...

    extJs4 toolbar工具条

    除了顶部工具栏 (`tbar`) 外,还可以添加底部分页工具栏 (`bbar`) 用于显示分页信息和导航: ```javascript bbar: Ext.create('Ext.toolbar.Paging', { store: store, displayInfo: true }) ``` - **`store`**: ...

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store必须设置 baseParams 的 limit 的值.

    ext增删改查

    ### 关于Ext.js中的增删改查操作 在前端开发领域,Ext JS 是一个非常流行的JavaScript框架,它为创建复杂的Web应用程序提供了丰富的组件库。本文将深入探讨如何使用Ext JS来实现基本的数据增删改查(CRUD)操作,...

Global site tag (gtag.js) - Google Analytics