`

ExtJS之toolbars(很漂亮的界面)

EXT 
阅读更多

 

/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

Ext.onReady(function(){
   
    var SamplePanel = Ext.extend(Ext.Panel, {
        width: 500,
        height:250,
        style: 'margin-top:15px',
        bodyStyle: 'padding:10px',
        renderTo: 'docbody',
        html: Ext.example.shortBogusMarkup,
        autoScroll: true
    });

    new SamplePanel({
        title: 'Standard',
        tbar: [{
            xtype:'splitbutton',
            text: 'Menu Button',
            iconCls: 'add16',
            menu: [{text: 'Menu Button 1'}]
        },'-',{
            xtype:'splitbutton',
            text: 'Cut',
            iconCls: 'add16',
            menu: [{text: 'Cut Menu Item'}]
        },{
            text: 'Copy',
            iconCls: 'add16'
        },{
            text: 'Paste',
            iconCls: 'add16',
            menu: [{text: 'Paste Menu Item'}]
        },'-',{
            text: 'Format',
            iconCls: 'add16'
        }]
    });

    new SamplePanel({
        title: 'Multi columns',
        tbar: [{
            xtype: 'buttongroup',
            title: 'Clipboard',
            columns: 2,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        },{
            xtype: 'buttongroup',
            title: 'Other Bogus Actions',
            columns: 2,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Button 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        }]
    });



    new SamplePanel({
        title: 'Multi columns (No titles, double stack)',
        tbar: [{
            xtype: 'buttongroup',
            columns: 3,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        },{
            xtype: 'buttongroup',
            columns: 3,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        }]
    });

    new SamplePanel({
        title: 'Mix and match icon sizes to create a huge unusable toolbar',
        tbar: [{
            xtype: 'buttongroup',
            columns: 3,
            title: 'Clipboard',
            items: [{
                text: 'Paste',
                scale: 'large',
                rowspan: 3, iconCls: 'add',
                iconAlign: 'top',
                cls: 'x-btn-as-arrow'
            },{
                xtype:'splitbutton',
                text: 'Menu Button',
                scale: 'large',
                rowspan: 3,
                iconCls: 'add',
                iconAlign: 'top',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy', iconCls: 'add16'
            },{
                text: 'Format', iconCls: 'add16'
            }]
        },{
            xtype: 'buttongroup',
            columns: 3,
            title: 'Other Actions',
            items: [{
                text: 'Paste',
                scale: 'large',
                rowspan: 3, iconCls: 'add',
                iconAlign: 'top',
                cls: 'x-btn-as-arrow'
            },{
                xtype:'splitbutton',
                text: 'Menu Button',
                scale: 'large',
                rowspan: 3,
                iconCls: 'add',
                iconAlign: 'top',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Button 1'}]
            },{
                xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy', iconCls: 'add16'
            },{
                text: 'Format', iconCls: 'add16'
            }]
        }]
    });

    new SamplePanel({
        title: 'Medium icons, arrows to the bottom',
        tbar: [{
            xtype: 'buttongroup',
            title: 'Clipboard',
            defaults: {
                scale: 'medium',
                iconAlign:'top'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add24',
                cls: 'x-btn-as-arrow'
            },{
                text: 'Paste',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format<br/>Stuff',
                iconCls: 'add24'
            }]
        },{
            xtype: 'buttongroup',
            title: 'Other Bogus Actions',
            defaults: {
                scale: 'medium',
                iconAlign:'top'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add24',
                cls: 'x-btn-as-arrow'
            },{
                text: 'Paste',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add24',
                cls: 'x-btn-as-arrow'
            }]
        }]
    });


    new SamplePanel({
        title: 'Medium icons, text and arrows to the left',
        tbar: [{
            xtype:'buttongroup',
            items: [{
                text: 'Cut',
                iconCls: 'add24',
                scale: 'medium'
            },{
                text: 'Copy',
                iconCls: 'add24',
                scale: 'medium'
            },{
                text: 'Paste',
                iconCls: 'add24',
                scale: 'medium',
                menu: [{text: 'Paste Menu Item'}]
            }]
        }, {
            xtype:'buttongroup',
            items: [{
                text: 'Format',
                iconCls: 'add24',
                scale: 'medium'
            }]
        }]
    });

    new SamplePanel({
        title: 'Small icons, text and arrows to the left',
        tbar: [{
            xtype:'buttongroup',
            items: [{
                text: 'Cut',
                iconCls: 'add16',
                scale: 'small'
            },{
                text: 'Copy',
                iconCls: 'add16',
                scale: 'small'
            },{
                text: 'Paste',
                iconCls: 'add16',
                scale: 'small',
                menu: [{text: 'Paste Menu Item'}]
            }]
        }, {
            xtype:'buttongroup',
            items: [{
                text: 'Format',
                iconCls: 'add16',
                scale: 'small'
            }]
        }]
    });

});
 

 

分享到：
| Jquery的一些日历控件推荐
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs 桌面风格 管理系统 极力推荐

    EXTJS的桌面风格允许开发者模仿传统桌面环境，创建出具有类似Windows或Mac OS X界面的Web应用，提升用户体验。 EXTJS的核心特点包括： 1. **组件化设计**：EXTJS采用组件化开发模式，提供了如表格、表单、树形视图...

    很绚丽的EXTJS例子

    这个"很绚丽的EXTJS例子"显然是一份包含EXTJS应用实例的压缩包，适合初学者学习和参考。 EXTJS的核心特性包括组件化、数据绑定、布局管理、丰富的UI组件库等。它的组件系统允许开发者构建出复杂的用户界面，从简单...

    Extjs 3.0 中文API CHM

    10. **拖放（Drag & Drop）**：ExtJS 3.0支持拖放操作，使得用户可以轻松地在界面上移动组件或数据，增强了用户体验。 总的来说，"ExtJS 3.0 中文API CHM"是学习和开发基于ExtJS应用的重要资源。通过深入理解和实践...

    ExtJS3.1-3.3中文API文档.zip

    8. **工具栏和菜单（Toolbars & Menus）**：提供创建顶部和底部工具栏以及下拉菜单的能力，用于放置按钮、分割线、下拉列表等。 9. **图表（Charts）**：从3.1版本开始，ExtJS引入了图表组件，能够创建各种数据可视...

    实例分析ExtJs

    1. **组件系统**: ExtJs的核心是其组件模型，它允许开发者创建复杂的用户界面。组件可以是简单的按钮、文本框，也可以是复杂的表格、树形结构或面板。每个组件都有自己的属性、方法和事件，可以通过配置对象来定制。...

    Extjs动态GRID

    在EXTJS中，动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图，以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除： EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....

    extjs电子教材,开发extjs框架的好东西

    9. **工具栏和菜单（Toolbars & Menus）**：EXTJS的工具栏和菜单组件为用户界面提供了丰富的操作选项。 10. **拖放（Drag & Drop）**：EXTJS支持组件间的拖放操作，增强用户体验，实现更直观的交互。 本电子教材会...

    ExtJS2Samples-v2.1.zip_DEMO_ExtJS2Samples_extjs

    ExtJS 是由Sencha公司开发的，它提供了一套完整的组件模型、数据绑定机制和丰富的用户界面组件，如表格、表单、树形视图、面板、菜单等。通过使用ExtJS，开发者可以创建具有桌面级用户体验的Web应用程序，无需深入...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    在3.0版本中，它提供了一系列丰富的组件，这些组件可以帮助开发者构建功能丰富的用户界面。以下是一些ExtJS 3.0中的常用组件： 1. **Panel（面板）**: Panel是最基本的容器，可以包含其他组件，常用于构建复杂的...

    Extjs 超级工具栏图标

    6. **多行工具栏（Multi-row Toolbars）**：如果超级工具栏中的图标过多，EXTJS支持创建多行工具栏，通过`fbar`（footer bar）或`tbar`（top bar）配置项来实现，以保持界面的整洁。 7. **扩展和插件（Extensions ...

    extjs2.0中文教程

    10. **主题（Themes）**：EXTJS支持更换皮肤和主题，可以根据需求定制界面样式。 通过EXTJS 2.0中文教程的学习，你可以了解如何创建这些组件，如何组织布局，如何与服务器进行数据交换，以及如何使用EXTJS的各种...

    extjs.3.0中文API

    4. 工具栏（Toolbars）和菜单（Menus）：提供丰富的按钮、下拉选项和菜单，增强用户界面。 三、数据管理 1. Store：存储数据的容器，可以从服务器加载数据，支持数据的读取、添加、删除和更新。 2. Proxy：与...

    ExtJs3.1目前所有例子源代码

    - **组件（Components）**：ExtJs中的组件包括按钮、面板、表单、树、网格等，它们是构建用户界面的基本元素。 - **布局（Layouts）**：ExtJs支持多种布局方式，如表格布局、边界布局、流式布局、绝对布局等，可以...

    Extjs中文api

    2. **数据绑定（Data Binding）**: ExtJS支持双向数据绑定，这意味着UI元素可以直接与数据源连接，数据的变化会实时反映到界面上，反之亦然。 3. **布局管理器（Layout Managers）**: 布局管理器负责调整组件大小和...

    ExtJS in Action

    - **事件(Event)**：事件是 ExtJS 中最基本的概念之一，用于处理用户与界面之间的交互。例如，当用户点击按钮时触发的事件。 - **组件(Component)**：组件是 ExtJS 中构建用户界面的基本单位。每个组件都有自己的...

    extjs前端开发手册以及结构框架

    EXTJS以其强大的组件模型、数据绑定机制和丰富的用户界面组件而闻名，它使得开发者能够创建功能丰富的、交互性强的Web应用。 EXTJS的核心是其组件库，包括表格、表单、树形视图、面板、菜单、工具栏等众多UI组件。...

    ExtJS in Action－英文原版－完整版

    它允许开发者构建具有复杂用户界面的交互式web应用。 2. 书籍《ExtJS in Action》：这本书是一本关于ExtJS的学习指南，适用于快速上手ExtJS框架的开发者。它被描述为比国内作者编写的同类型工具书质量更高，是英文...

    商品房销售管理系统 extjs的

    ExtJS是一款强大的JavaScript库，专用于构建富客户端的Web应用，它提供了一套完整的组件化开发框架，使得开发者能够快速构建功能丰富的用户界面。 1. ExtJS概述： ExtJS是一个开源的JavaScript库，基于Sencha公司...

    ExtJS 教程

    4. **第四章 - 按钮、菜单和工具栏**: 这部分涵盖ExtJS中的交互元素，如按钮（Buttons）、下拉菜单（Menus）和工具栏（Toolbars）。这些组件可以增强用户界面的交互性。 5. **第五章 - 使用Grid显示数据**: Grid...

Magicbox
Global site tag (gtag.js) - Google Analytics