`
hwpok
  • 浏览: 250651 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext Toolbar 练习

    博客分类:
  • EXT
阅读更多
function toolbarE() {
    
var Toolbar = new Ext.Toolbar({
                renderTo : 
"toolBar",
                width : 
500
            }
);
    Toolbar.addButton([
{
                text : 
"新建",
                handler : onButtonClick
            }
{
                text : 
"打开",
                handler : onButtonClick
            }
{
                text : 
"保存",
                handler : onButtonClick
            }
{
                text : 
"取消",
                handler : onButtonClick
            }
]);
    Toolbar.addSeparator();
    Toolbar.addField(
new Ext.form.TextField({
                width : 
50
            }
));
    Toolbar.addFill();
    Toolbar.addElement(Ext.get(
"A"));
    Toolbar.addSeparator();
    Toolbar.addText(
"静态文本");
    
function onButtonClick(btn) {
        alert(btn.text);
    }

}


function toolbarE2() {
    Ext.BLANK_IMAGE_URL 
= "/learn/ext/resources/images/default/s.gif";
    
var Toolbar = new Ext.Toolbar({
                renderTo : 
"toolBar",
                width : 
300
            }
);
    
var fileMenu = new Ext.menu.Menu({
                shadow : 
"frame",
                items : [
{
                            text : 
"新建",
                            handler : onMenuItem
                        }
{
                            text : 
"打开",
                            handler : onMenuItem
                        }
{
                            text : 
"关闭",
                            handler : onMenuItem
                        }
]
            }
);
    
var editMenu = new Ext.menu.Menu({
                shadow : 
"drop",
                items : [
{
                            text : 
"复制",
                            handler : onMenuItem
                        }
{
                            text : 
"粘贴",
                            handler : onMenuItem
                        }
{
                            text : 
"剪切",
                            handler : onMenuItem
                        }
]
            }
);
    
var infoMenu = new Ext.menu.Menu({
                shadow : 
"frame",
                items : [
{
                            text : 
"个人信息",
                            menu : 
new Ext.menu.Menu({
                                        items : [
{
                                                    text : 
"身高",
                                                    handler : onMenuItem
                                                }
{
                                                    text : 
"体重",
                                                    handler : onMenuItem
                                                }
{
                                                    text : 
"生日",
                                                    menu : 
new Ext.menu.DateMenu(
                                                            
{
                                                                handler : onClickDate
                                                            }
)
                                                }
]
                                    }
)
                        }
{
                            text : 
"打开",
                            handler : onMenuItem
                        }
{
                            text : 
"关闭",
                            handler : onMenuItem
                        }
]
            }
);
    Toolbar.add(
{
                text : 
"文件",
                menu : fileMenu
            }
{
                text : 
"编辑",
                menu : editMenu
            }
{
                text : 
"信息",
                menu : infoMenu
            }
)
    
function onMenuItem(item) {
        alert(item.text);
    }

    
function onClickDate(dm, date) {
        alert(date.format('Y
-m-j'));
    }

}

function toolbarE3() {
    Ext.BLANK_IMAGE_URL 
= "/learn/ext/resources/images/default/s.gif";
    
var Toolbar = new Ext.Toolbar({
                renderTo : 
"toolBar",
                width : 
300
            }
);
    
var themeMenu = new Ext.menu.Menu({
                items : [
{
                            text : 
"主题颜色",
                            menu : 
new Ext.menu.Menu({
                                        items : [
{
                                                    text : 
"红色主题",
                                                    checked : 
true,
                                                    group : 
"theme",
                                                    checkHandler : onItemCheck
                                                }
{
                                                    text : 
"蓝色主题",
                                                    checked : 
false,
                                                    group : 
"theme",
                                                    checkHandler : onItemCheck
                                                }
{
                                                    text : 
"黑色主题",
                                                    checked : 
false,
                                                    group : 
"theme",
                                                    checkHandler : onItemCheck
                                                }
]
                                    }
)
                        }
{
                            text : 
"是否启用",
                            checked : 
false
                        }
]
            }
);
    Toolbar.add(
{
                text : 
"风格选择",
                menu : themeMenu
            }
)
    
function onItemCheck(item) {
        alert(item.text);
    }

}

Ext.onReady(toolbarE3);
分享到:
评论

相关推荐

    ext Panel+toolbar+button 实作带注释

    在本文中,我们将深入探讨EXT JS库中的Panel、Toolbar和Button组件,并通过一个带注释的实作案例来帮助初学者理解这些概念。EXT JS是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件模型和...

    EXT核心API详解

    63、Ext.Toolbar类 …………………… 55 64、Ext.Toolbar.Item类 ……………… 56 65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext....

    toolbar示范_VB6.0的toolbar使用示范_

    在VB6.0(Visual Basic 6.0)中,`Toolbar`是一个非常重要的控件,它用于创建用户界面中的工具栏。工具栏通常包含一系列的按钮,这些按钮...通过不断练习和探索,你将能够熟练地在VB6.0中设计出符合用户需求的工具栏。

    Android自定义toolbar布局

    在Android开发中,`Toolbar`已经取代了传统的`ActionBar`,成为新的导航和展示应用元数据的组件。它提供了一种更加灵活的方式来定制顶部栏,从而实现与Material Design设计规范相一致的用户界面。本教程将详细介绍...

    ToolBar居中添加控件

    在Android开发中,`ToolBar`是App界面设计中常用的一个组件,它作为Activity或Fragment的顶部栏,可以提供导航、菜单和其他操作。本教程将详细讲解如何在`ToolBar`中居中添加自定义控件,以提升应用界面的美观度和...

    extjs4.2 动态生成toolbar

    在 Toolbar.js 中,我们需要定义一个 Ext.zc.grid.Toolbar 类,该类继承自 Ext.toolbar.Toolbar,并且 alias 为 zc_grid_Toolbar。我们还需要在 render 事件中使用 Ext.Ajax.request 方法来请求后台的工具栏数据,并...

    ToolbarDemo 事项toolbar功能

    在Android开发中,`Toolbar`是一个重要的组件,它是Android Design Support Library的一部分,用于替代传统的`ActionBar`,提供更灵活的定制性和与Material Design风格更好的一致性。本教程将详细讲解如何在Android...

    extJs4 toolbar工具条

    tbar: Ext.create('Ext.toolbar.Toolbar', { items: [ // 工具栏项目定义 ] }) ``` #### 三、工具栏项目定义 工具栏项目可以是任意类型的 `ExtJS` 组件,如按钮、文本框等。在提供的代码示例中,可以看到以下几...

    storebar extjs通过store实现toolbar

    var myToolbar = Ext.create('Ext.toolbar.Toolbar', { dock: 'top', items: [{ xtype: 'container', itemId: 'storebarContainer' }] }); ``` 3. 绑定`Store`到`Toolbar`:使用`bind`或`mon`方法监听`Store`...

    toolbar

    在Android开发中,`Toolbar`是一个非常重要的组件,它作为Action Bar的替代品引入,提供了更灵活的定制和布局选项。本示例将深入探讨`Toolbar`的使用方法及其相关知识点,帮助开发者更好地理解和应用这一功能强大的...

    EXT分页工具条

    EXT分页工具条(Ext.toolbar.Paging)是EXT的toolbar组件的一个子类,可以通过以下代码创建: ```javascript var pagingToolbar = Ext.create('Ext.toolbar.Paging', { store: myStore, // 关联的数据存储 ...

    Ext js Xtype

    如`Ext.Toolbar`,`Ext.Toolbar.Button`(已废弃,建议使用`button`),`Ext.Toolbar.Fill`,`Ext.Toolbar.Separator`等。 - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`...

    Ext Jsp 聊天室 jschat

    - **Ext Toolbar**:可能包含额外的操作按钮,如清空聊天记录或查看历史记录。 5. **Ajax通信** Ext JS的Ajax组件如`Ext.Ajax`或`Ext.data.Proxy`负责异步与服务器交换数据。聊天室中,当用户发送消息时,会调用...

    toolbar实例程序(两种动态创建toolbar的方法,还有带提示的toolbar)

    在Android开发中,Toolbar作为Action Bar的替代品,被广泛应用于各类应用的界面设计中,提供了自定义性和灵活性。这个"toolbar实例程序"包含了两种不同的动态创建Toolbar的方法以及如何实现带有提示功能的Toolbar,...

    ToolBar的Demo实战

    ToolBar是Android开发中常见的一种组件,它在API Level 21(Android Lollipop)被引入,作为ActionBar的替代品,提供了更加灵活的定制能力和更好的视觉效果。本项目"ToolBar的Demo实战"旨在通过一个简单的实例,帮助...

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

    **2.15 Toolbar (Ext.Toolbar)** - **xtype**: `toolbar` - **功能描述**:Toolbar 是一个包含按钮、文本框等控件的工具栏。 - **主要用途**:为用户提供快速访问常用功能的方式。 **2.16 Form Panel (Ext....

    Toolbar基本使用及Toolbar+ListView实现滑动变色

    在Android应用开发中,Toolbar是Android 5.0(Lollipop)引入的一个组件,它作为ActionBar的替代品,提供了更多的自定义性和灵活性。本教程将详细介绍Toolbar的基本使用,并结合ListView探讨如何实现滑动变色的效果...

    Ext组件说明 Ext组件概述

    ### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序。它提供了大量的组件和工具,使得开发者能够快速且高效地构建用户界面。对于初学者而言,理解...

    ext.net安装说明

    它基于 Ext.js 库构建,提供了超过 100 种工具,包括 TextBox、ComboBox、Button、ToolBar、StatusBar、Panel、TabPanel、ExplorerBar、MenuBar、PictureBox 等多种控件,并且支持 Ajax 无刷新效果。这些特性使得 ...

    JSP中使用EXT实现grid table

    2. 分页:EXT Grid可以通过配置Paging Toolbar来实现数据分页,这样用户可以在大量数据中轻松浏览。 3. 排序:Grid中的每一列都可以设置为可排序,用户只需点击列头,即可根据该列数据进行升序或降序排序。 4. ...

Global site tag (gtag.js) - Google Analytics