`

Extjs 中如何用一个按钮控制Panel闭合与展开

 
阅读更多
引自:http://blog.sina.com.cn/s/blog_4b67d3240100rxaz.html
在extjs 的panel中,有两个公用方法,一个是collapse():panel收缩;另一个是expand():panel展开。我们可以很好的使用这两上方法来作文章。我们可以定义一个公共变量,来进行判断panel当前所需要展开还是需要收缩。
具体怎么写,请看下面的示例:
 
  1. Ext.onReady(function() {  
  2.     var p= new Ext.Panel({  
  3.         title: 'Hello',  
  4.         width: 500,  
  5.         height: 500,  
  6.         renderTo: Ext.getBody(),  
  7.         collapsible: true  
  8.     });  
  9.       
  10.     var f= 1;  
  11.     var b= new Ext.Button({  
  12.         text: '嘿嘿',  
  13.         renderTo:document.body,  
  14.         handler: function() {  
  15.             if (f=== 1) {  
  16.                 p.collapse();  //panel收缩
  17.                 f= 0;  //修改公共变量值
  18.             } else {  
  19.                 p.expand();  //panel展开
  20.                 f= 1;  //修改公共变量值
  21.             }  
  22.         }  
  23.     });  
  24. }) 
分享到:
评论

相关推荐

    Extjs 重写Panel添加click事件

    在Ext JS这个强大的JavaScript框架中,Panel是一种常用的组件,用于构建复杂的用户界面。Panel提供了丰富的功能,包括布局管理、工具栏、标题、可配置性等。然而,有时我们需要对Panel进行自定义,例如添加或修改...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    一个简单的EXTJS Panel

    其中,`Panel`是EXTJS中最基础也是最常用的一个UI组件之一。它主要用于封装其他组件,并提供布局、边框等管理功能。 #### 二、EXTJS Panel 基础用法 在本示例中,我们通过一段简单的HTML代码及JavaScript脚本创建...

    Extjs自动最大化panel

    在EXTJS中,"Extjs自动最大化panel"是一种高级布局技术,它允许用户创建一个能够自动适应并填充其容器的面板(Panel)。这种特性对于构建响应式和自适应的用户界面至关重要,尤其在现代Web应用中,用户期望界面能够...

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

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

    extjs grid.panel 项目 源码

    在"extjs grid.panel 项目 源码"中,我们可以深入理解如何利用ExtJS构建一个功能完备的数据网格。 Grid Panel是ExtJS中的一个核心组件,它允许开发者以表格的形式展示大量数据,并提供多种交互功能,如排序、分页、...

    extjs 的权限问题 要求控制的对象是 菜单,按钮,URL

    在Extjs框架中,实现基于角色的权限控制是一个常见需求。Extjs主要用于构建富互联网应用(RIA),其组件化的UI构建方式与传统Web开发有较大差异。因此,对于权限的控制也要采用特定的策略来实现。上述文件内容主要...

    Extjs 4.11 重写 Panel 添加 click事件

    在ExtJS 4.11框架中,Panel是常见的组件之一,用于构建用户界面的容器。Panel经常被用作其他组件的容器,如按钮、表格、表单等。有时,我们可能需要对Panel进行自定义操作,比如监听并处理Panel上的点击事件。这涉及...

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...

    ExtJs的resultGrids中动态添加按钮

    在IT行业中,ExtJS是一个非常流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一套完整的组件库,包括表格、面板、窗口等,使得开发者能够创建功能强大的交互式用户界面。在ExtJS中,`resultGrids`通常...

    extjs4中panel的accordion布局以及treepanel导航

    在EXTJS4中,Panel和TreePanel是两个非常重要的组件,它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能,帮助开发者更好地理解和运用这些特性。 首先,让我们...

    ExtJS文字按钮列

    标题提到的"ExtJS文字按钮列"是指在ExtJS表格中添加一列,该列包含的是文字按钮而非图片按钮。这样的设计使得用户可以更直观地理解按钮的功能,同时减少了对图形资源的依赖。 在官方3.3版本中,虽然默认提供的是...

    ExtJS 4 button按钮

    ExtJS 4的Button组件还提供了一系列方法来控制和操作按钮的状态和行为,包括但不限于: - **enable()**:启用按钮,使其可被点击。 - **disable()**:禁用按钮,防止用户进行任何操作。 - **destroy()**:销毁按钮...

    Extjs tree+grid+form+panel 使用实例

    Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    在这个实例中,Ext.tree.Panel可能被用来展示由Accordion布局管理的各个类别,每个类别下可能包含一系列子项,这些子项通过与后台Servlet或Struts2的交互,用JSON数据填充。 总结来说,这个实例展示了如何将前端的...

    extjs动态生成model、store、panel

    extjs动态生成model、store、panel;sql拼接等多种技术难点

    extjs tab panel

    ExtJS Tab Panel是Ext JS库中的一个核心组件,它用于创建具有多个标签页的应用界面,类似于浏览器中的标签页。在Web应用中,Tab Panel经常被用来组织和展示大量的信息,让用户能够在一个页面上轻松切换不同的内容...

    ExtJs图片按钮控件

    ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件,它允许开发者在按钮上显示图片,以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素,比如导航按钮或者操作按钮。下面我们将深入探讨...

    extjs中文文档大全

    在使用过程中,要特别注意ExtJS的MVC(Model-View-Controller)架构,这是其设计的一大亮点。通过模型管理数据,视图展示数据,控制器协调两者,可以使代码结构清晰,易于维护。此外,利用Data Binding功能,可以...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

Global site tag (gtag.js) - Google Analytics