`

改进EXT提供的Portal组件,自定义最小化最大化按钮

阅读更多

使用EXT来实现项目的UI,项目中的首页需要一个类似Portal的多窗口自由拖动的功能,参考了Ext的Portal的example实现后还需要最大化和最小化功能,查了一下Ext的Panel.js中的源码,找到了预制的各种窗口图标。然后实现了自定义的最大化最小化功能。

 

代码如下:

	    var tools = [{
            id: 'minimize',
            handler: function(e, target, panel){
				var container = panel.findParentByType('portal');
	            container.items.each(function(item, index, length) {
					item.columnWidth = MIN_COLUMN_WIDTH;
					item.items.each(function(item, index, length) {
						item.setHeight(originHeight);
					});
				});
				contentArea.render();
            }
        },{
            id: 'maximize',
            handler: function(e, target, panel){
				var container = panel.findParentByType('portal');
	            container.items.each(function(item, index, length) {
					item.columnWidth = MAX_COLUMN_WIDTH;
					item.items.each(function(item, index, length) {
						item.setHeight(changeHeight);
					});
				});
				contentArea.render();
            }
        },{
	        id:'refresh',
	        handler: function(e, target, panel){
	            var frameId = 'content' + panel.getId();
                $(frameId).src = $(frameId).src;
        	}
	    }];

  目前Panel支持的窗口图标:

     * <li><tt>toggle</tt> (Created by default when {@link #collapsible} is <tt>true</tt>)</li>
     * <li><tt>close</tt></li>
     * <li><tt>minimize</tt></li>
     * <li><tt>maximize</tt></li>
     * <li><tt>restore</tt></li>
     * <li><tt>gear</tt></li>
     * <li><tt>pin</tt></li>
     * <li><tt>unpin</tt></li>
     * <li><tt>right</tt></li>
     * <li><tt>left</tt></li>
     * <li><tt>up</tt></li>
     * <li><tt>down</tt></li>
     * <li><tt>refresh</tt></li>
     * <li><tt>minus</tt></li>
     * <li><tt>plus</tt></li>
     * <li><tt>help</tt></li>
     * <li><tt>search</tt></li>
     * <li><tt>save</tt></li>
     * <li><tt>print</tt></li>
 

 

分享到:
评论

相关推荐

    Ext继承--Ext自定义组件的书写方式

    目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...

    EXT 自定义控件扩展

    EXT 自定义控件扩展是EXT框架中的一个重要特性,它允许开发者根据项目需求创建具有特定功能或界面风格的自定义组件。EXT是一个强大的JavaScript库,主要用于构建富客户端的Web应用程序,其核心理念是提供一套完整的...

    ExtJS如何自定义图片按钮组件

    2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs包examples文件夹里任意一个组件包...

    ext自定义树组件

    它提供了丰富的组件化系统,使得开发者能够方便地创建复杂的用户界面。在EXT中,树组件(Tree Component)是一种常见的UI元素,用于展示层级结构的数据,如文件系统、组织结构或任何具有层次关系的信息。 自定义EXT...

    Ext组件说明 Ext组件概述

    TreePanel组件提供了一个层次化的数据展示方式,适用于显示目录结构或具有父子关系的数据集合。 ##### 4. **Viewport(视口)** Viewport组件是Ext应用程序的根容器,用于填充整个浏览器窗口,管理布局和响应窗口...

    ext portal

    标题中的"ext portal"指的是Ext JS中的Portal布局,这是一种用于创建可自定义面板布局的工具,常用于构建具有可拖动、可调整大小和可排序小部件的仪表板界面。Ext JS是一个强大的JavaScript库,专注于构建富客户端...

    Ext 实现自定义控件

    这允许开发者创建符合特定需求的个性化组件,同时充分利用EXT提供的强大功能。以下将详细讲解两种常见的自定义EXT控件的方法: 1. **重载 `initComponent` 函数** `initComponent` 是EXT JS组件生命周期中的一个...

    EXT.NET1.0带自定义页大小的分页

    EXT.NET 提供了GridPanel组件,这个组件具有强大的分页功能,包括内置的页大小选择器和自定义页大小选项。 首先,Pagination.aspx文件是ASP.NET页面,它包含了EXT.NET的HTML和JavaScript代码,用于定义GridPanel...

    ext 颜色改变组件

    EXT Color Change Component,即EXT颜色改变组件,是EXT库中一个用于处理颜色选择和展示的UI组件,它提供了用户友好的界面,使得用户可以在应用中方便地更改颜色。 在EXT框架中,组件是构建用户界面的基本单元,...

    EXT.form组件

    它提供了额外的配置项,如允许小数、负数,设定最大最小值和精度,以及自定义小数分隔符。 10. `radio`:`Ext.form.Radio`是单选按钮组件,用户只能选择其中的一个选项。 11. `textarea`:`Ext.form.TextArea`用于...

    Ext portal例子

    Portlet可以包含任意的Ext JS组件,并提供标题、关闭、最小化、最大化等操作。 3. **拖放功能(Drag and Drop)** Ext JS 提供了强大的拖放支持,使得用户可以自由地调整portlets的位置,实现个性化布局。在示例中...

    Ext自定义控件库

    它提供了丰富的组件库,涵盖了从基本的按钮、表单元素到复杂的网格、图表等各类控件。然而,在实际开发中,我们往往需要根据项目需求定制特定的控件。"Ext自定义控件库"正是这样一个资源集合,包含了开发者封装的...

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

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    Ext2.0 文件上传组件

    这个组件基于Ext JavaScript库的2.0版本,Ext是一个强大的前端开发框架,提供了丰富的用户界面组件和数据管理功能。在本文中,我们将深入探讨这个组件的核心特性、工作原理以及如何在实际项目中集成和使用。 1. **...

    Extjs使用Window最小化窗口

    3. **创建最小化按钮**:在工具栏的`items`数组中,创建一个按钮,配置一个唯一的ID和点击事件处理器,例如`{ text: '最小化', id: 'minimize-btn', handler: minimizeWindow }`。 4. **定义最小化和还原函数**:...

    EXT 按钮属性对应图片

    3. `tooltip`:此属性为按钮提供提示信息,当鼠标悬停在按钮上时显示。例如,`tooltip: '点击执行操作'`。 4. `handler`:按钮被点击时执行的函数。这通常用于定义按钮的点击事件处理逻辑,例如`handler: function...

    ext下拉多选组件multicombo

    在IT行业中,组件是构建用户界面的基本元素,它们允许开发者以模块化的方式处理复杂的交互和设计。"ext下拉多选组件multicombo"是一种专为EXTJS框架设计的组件,EXTJS是一个强大的JavaScript库,用于创建桌面级的富...

    用JQuery实用的EXT按钮

    首先,EXT按钮的核心概念在于提供了一种方法来创建具有多种交互功能的按钮,如点击事件、图标、下拉菜单等。在HTML页面中,一个基本的EXT按钮可以通过以下方式定义: ```html 点击我 ``` 然后在jQuery代码中,我们...

    Ext js 的一个 Portal 框架

    Ext js 的一个 Portal 框架Portal Portal Portal Portal Portal Portal Portal

    改造过的ext portal

    在您的描述中提到的"改造过的EXT Portal"指的是对原版EXT Portal进行了定制化开发,以适应特定需求或改进用户体验。改造可能包括界面设计的优化、功能模块的增删以及交互流程的调整。 EXT JS是一个强大的JavaScript...

Global site tag (gtag.js) - Google Analytics