`
Althars
  • 浏览: 75976 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类

ext grid 增加 多个 toolbar

阅读更多

最近项目中客户提出的搜索条件很多,有的达2位数,一行toolbar明显不够用了,默认情况下ext一行toolbar过长时后面的内容就自动隐藏了,在extjs上面翻了又翻,找到一个办法,很简单,再增加一个toolbar。一个测试的简短grid代码

  // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:600,
        height:300,
        autoExpandColumn:'common',
        title:'Edit Plants?',
        frame:true,
        plugins:checkColumn,
        clicksToEdit:1,

        tbar: new Ext.Toolbar({
			autoWidth:true,
				autoShow:true,
			items:[
			{text: 'there is a add button for test'},
			   '-',
			   '->',
			   {text: 'there is a update button for test'},
			   
                {text: 'there is a delete button for test'}
		]
		 })
    });


this.bbar2 = new Ext.Toolbar({
            renderTo:grid.tbar
            ,items:['Example of second toolbar', '-', {
                 text:'Button'
                ,iconCls:'icon-key'
            }, '-'
            ]
        });



    // trigger the data store load
    store.load();
});

 其中bbar2就是新增加的toolbar -_-!,再

renderTo:grid.tbar

 

by the way,用chrome编辑完发现插入代码没有保存按键....@##%%#

 

  • 大小: 14 KB
分享到:
评论
9 楼 fengart 2008-11-14  
8 楼 chanball 2008-10-16  
试一下先,这样都想得出来,lz还行呀!
7 楼 Althars 2008-10-15  
zhuliyong :你说的对齐是不是指'->'?,在'->'后面的所有控件都会在右侧显示
6 楼 Althars 2008-10-15  
mimijidi  :hehe,确实ext的文档不是太多,大家更多的时候都是自己摸索,不过很多问题通过extjs和ext自带文档还是可以找到和解决的,对于中文而言,国内的几本比较系统的ext书籍好像也快上市了,到时候可以借鉴借鉴
5 楼 zhuliyong 2008-10-13  
各位 ,bbar或者tbar怎么给他设对齐方式啊,如:右对齐,
通过什么属性,在 哪设?
4 楼 mimijidi 2008-10-03  
2.2是的可以的,哈哈,没想到还有这招,学习ext曲线真的很大,文档还是不够,都是大量初级的,象楼主这种就很怪异
3 楼 Althars 2008-09-19  
duanlei,我是在2.2的editor grid example例子上修改测试的,应该没有问题,可能你其它地方有不同的地方导致没有显示,你可以再看看,有问题欢迎探讨.
2 楼 duanlei 2008-09-18  
ext2.2里试了下 不 没显示 出来

不个tbar  可以 给个 new Ext.Panel 这里就可以加多个toolbar
1 楼 duanlei 2008-09-17  
学习了

相关推荐

    ext grid tree 应用

    综上所述,"ext grid tree 应用"展示了EXT JS在构建动态、交互式Web应用程序的强大能力,包括数据展示、数据管理、用户交互以及个性化设置等多个方面。通过学习和理解这些知识点,开发者可以更好地利用EXT JS创建...

    ExtJS笔记---Grid实现后台分页

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据...在阅读这篇博客时,可以参照给出的"extgrid"文件,查看具体的代码实现,以便更好地理解和学习。

    EXT核心API详解

    // 用,分隔多个选择器 '#foo a, #bar span.some-class@mouseover' : function(){ // do something } }); apply( Object obj, Object config, Object defaults ) : Object 从config拷贝所有的属性到obj,如果有...

    Extjs Grid 扩展实例

    3. **分页**:使用`Ext.toolbar.Paging`工具栏,我们可以轻松地实现数据的分页展示。配置`store`的`paging`属性,以及`grid`的`dockedItems`来添加分页栏,这样用户就能在大量数据中快速导航。 4. **过滤**:通过`...

    Ext组件描述,各个组件含义

    - **主要用途**:用于展示多个相关的数据集或功能模块,每个选项卡代表一个不同的页面。 **2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,...

    Ext中xtype和vtype.

    * tabpanel:一个标签面板组件,用于显示多个页面。 * treepanel:一个树形面板组件,用于显示树形结构的数据。 * viewport:一个视口组件,用于定义应用程序的视口。 * window:一个窗口组件,用于显示某些信息。 ...

    ext3.0所有控件演示代码

    这个压缩包文件提供了EXT3.0中的几乎全部控件的演示代码,覆盖了表格、表单、分页工具栏以及图标等多个重要组件的使用方法。下面将详细介绍这些知识点。 1. 表格(Grid):EXT3.0的表格控件是其核心功能之一,能够...

    Ext3.0 api帮助文档

    - **Ext.toolbar.Toolbar**: 显示按钮、分割线、文本等工具栏元素。 - **Ext.menu.Menu**: 创建下拉菜单,常用于按钮的右键菜单或工具栏的下拉菜单。 10. **其他功能** - **Ajax请求(Ajax Requests)**: 使用...

    springMVC整合ext4js

    通过定义不同的Tab或Navigation节点,用户可以在多个功能模块间自由切换。这些节点对应着Spring MVC中的不同控制器或URL,当用户点击导航项时,发起Ajax请求调用对应的Controller方法,更新视图内容。 对于添加表单...

    很绚丽的EXT例子(功能还蛮多的)

    1. **EXT Grid**:EXT的网格组件(Grid)允许你显示大量的数据并进行排序、筛选和编辑。这个例子可能展示了如何定制列、行以及行选择、分页和数据绑定。 2. **EXT Form**:EXT提供了丰富多样的表单元素,如文本框、...

    EXT简体中文参考手册(PDF&CHM电子档)

    获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器Adapters 13 核心Core 13 Javascript中的作用域(scope) 13 ...

    EXT样式的页面原型

    4. 页面组件:EXT框架包含多种预定义的UI组件,如Grid(表格)、Panel(面板)、Window(窗口)、Form(表单)、Button(按钮)、Toolbar(工具栏)等。这些组件都具有丰富的属性和方法,可以方便地定制外观和行为,...

    Ext 3.0 中文文档

    2. **组件系统**:详述Ext的各种组件,如Grid面板、Form表单、Window窗口、TabPanel选项卡、Toolbar工具栏等,以及如何创建和配置这些组件。 3. **数据绑定**:讲解Ext的数据模型(Model)、数据存储(Store)和...

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

    这个"Ext经典例子整合 快速上手必看"的资源包提供了多个EXTJS组件的示例,帮助开发者快速掌握EXTJS的核心概念和用法。以下是对每个示例及其相关知识点的详细说明: 1. **Tree**: EXTJS中的TreePanel是用于展示...

    Ext.js教程和Ext.js API

    Ext.js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和数据绑定功能,使得开发者可以构建出具有桌面应用级别的交互式网页应用。本教程和API文档聚焦于Ext.js 3.0版本...

    官方Ext3.0实例包

    6. 多浏览器兼容:Ext3.0对主流浏览器有良好的支持,包括IE、Firefox、Chrome、Safari等。 二、主要组件介绍 1. 表格(Grid):展示大量数据的表格组件,支持分页、排序、过滤、编辑等功能。 2. 表单(Form):...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    ext2.0 详解和API

    2. **容器类**:如Ext.Panel,是其他组件的容器,可以包含多个子组件,并支持不同的布局策略。 3. **窗体组件**:如Ext.FormPanel,用于创建表单,支持数据验证和提交。 4. **数据管理**:如Ext.data.Store,用于...

    EXT 中文帮助手册

    4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器...

Global site tag (gtag.js) - Google Analytics