ExtJs的 Ext.layout.Accordion layout 布局在API中是没有事件的,其实只要监听items中的事件就可以了:
listeners : {
beforerender : function (){alert('beforerender');},
beforecollapse : function(){alert('beforecollapse');},
beforeexpand : function(){alert('beforeexpand');},
expand : function(){alert('expand');}
}
下面需求为网站进入时默认加载子目录改为点击父目录时才加载,前台代码改动如下:
未改动前:
var accordion; // 第一步,根据用户信息动态构造每个树面板 function createFirstLevelPanel(json) { var length = json.length;// json.data.length; var pageId; var pageName; var link_address; var treeArray = new Array(length); var itemArray = new Array(length); var isExpanded; var imageStr; for (var i = 0; i < length; i++) { pageId = json[i].id; pageName = json[i].text; pageType = json[i].openType; treeArray[i] = new Ext.tree.TreePanel({ rootVisible : false, autoHeight : true, split : true, lines : true, autoScroll : false, autoWidth : true, animate : true, enableDD : false, border : false, containerScroll : true, loader : new Ext.tree.TreeLoader({ dataUrl : url//根据id查询子节点 }), expanded : false, root : new Ext.tree.AsyncTreeNode({ draggable : false, id : pageId, expanded : false }), listeners : { click : treeClick } }); imageStr = "fenxi"; itemArray[i] = new Ext.Panel({ title : pageName, autoScroll : true, autoWidth : true, collapsed : true, iconCls : imageStr, border : false }); itemArray[i].add(treeArray[i]); } createAccordion(itemArray); } // 第二步,将每个Panel加入到accordion中 function createAccordion(itemArray) { accordion = new Ext.Panel({ region : 'center', margins : '0 0 0 0', split : true, autoWidth : true, collapsible : false, layoutConfig : { animate : true }, layout : 'accordion' }); for (var j = 0; j < itemArray.length; j++) { accordion.add(itemArray[j]); } }
改动后:
var accordion; // 第一步,根据用户信息动态构造每个树面板 function createFirstLevelPanel(json) { var length = json.length;// json.data.length; var pageId; var pageName; var link_address; var itemArray = new Array(length); var isExpanded; var imageStr; for (var i = 0; i < length; i++) { pageId = json[i].id; pageName = json[i].text; pageType = json[i].openType; imageStr = "fenxi"; itemArray[i] = new Ext.Panel({ id : pageId, title : pageName, autoScroll : true, autoWidth : true, collapsed : true, iconCls : imageStr, border : false, listeners : { beforeexpand : function() { this.add(new Ext.tree.TreePanel({ rootVisible : false, autoHeight : true, split : true, lines : true, autoScroll : false, autoWidth : true, animate : true, enableDD : false, border : false, containerScroll : true, loader : new Ext.tree.TreeLoader({ dataUrl : url//根据id查询子节点 }), expanded : false, root : new Ext.tree.AsyncTreeNode({ draggable : false, id : this.getId(), expanded : false }), listeners : { click : treeClick } })) } } }); } createAccordion(itemArray); } // 第二步,将每个Panel加入到accordion中 function createAccordion(itemArray) { accordion = new Ext.Panel({ region : 'center', margins : '0 0 0 0', split : true, autoWidth : true, collapsible : false, layoutConfig : { animate : true }, layout : 'accordion' }); for (var j = 0; j < itemArray.length; j++) { accordion.add(itemArray[j]); } }
相关推荐
9.4.6 手风琴布局:ext.layout.container.accordion / 447 9.4.7 锚固布局:ext.layout.container.anchor / 448 9.4.8 绝对定位布局:ext.layout.container.absolute / 450 9.4.9 边框布局:ext.layout....
在支持一次仅显示一个子组件的布局中,如`Ext.layout.Accordion`、`Ext.layout.CardLayout`和`Ext.layout.FitLayout`,这个属性特别有用。 2. **allowDomMove**: 默认值为`true`,表示在组件渲染过程中允许移动DOM...
- **`layout`:** 设置为`'border'`,这是一种多区域布局,可以将屏幕划分为北、南、东、西和中心五个区域,每个区域都可以包含不同的组件。 #### 3. 多区域布局实例解析 在代码中,我们可以看到`Ext.Viewport`内部...
布局由`Ext.layout.Accordion`定义,每个子组件按照折叠的方式呈现。 2. **Border布局**:此布局将容器分为五个区域——东(east)、南(south)、西(west)、北(north)和中心(center)。通过`Ext.layout....
- **定义**:通过 `Ext.layout.Accordion` 类定义,布局名称为 `accordion`。 - **特点**:允许容器中的子元素以可折叠的形式展示。 - **使用技巧**:默认情况下,使用 `ExtAccordion` 布局时会自动展开第一个子元素...
3. **Column布局**:通过`Ext.layout.ColumnLayout`实现,视作一列,子元素可以指定`columnWidth`(百分比宽度)或`width`(固定像素宽度)来决定占据的列宽。可以混合使用这两种方式,灵活地调整列的宽度。 4. **...
它由`Ext.layout.Accordion`定义,适合展示分段内容,如FAQ或层级菜单。 2. Border布局:基于`Ext.layout.BorderLayout`,它将容器划分为五个区域:东(east)、南(south)、西(west)、北(north)和中心...
6. **layout**:FieldSet 使用的布局类型,可以选择 `accordion`、`anchor`、`border`、`card`、`column`、`fit`、`form` 或 `table`。可以通过 `layoutConfig` 配置进一步定制布局参数。 7. **animCollapse**:...
27. Renamed <ext:Accordion> to <ext:AccordionLayout> 28. Removed DataReader class .ReaderID property. 29. JsonReader: added IDProperty (instead of ReaderID) 30. XmlReader: added IDPath (instead...
Accordion 布局由类Ext.layout.Accordion 定义,名称为accordion,表示可折叠的布局,也就 是说使用该布局的容器组件中的子元素是可折叠的形式。
6. **layout**: FieldSet可以使用多种布局模式,如accordion、anchor、border、card、column、fit、form和table。每种布局都有其特定的用途和配置方式。 7. **animCollapse**: 如果设置为`true`,FieldSet在展开和...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
在源码层面,ExtJS 的accordion布局依赖于Ext.layout.container.Accordion类。这个类实现了布局逻辑,包括计算每个面板的高度,处理面板的展开和折叠事件等。开发者可以通过阅读源码深入理解其内部工作原理,以便...
11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...
一、Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板。 layoutConfig:true表示在执行展开折叠时启动动画效果,...
11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...
通过 `com.gwtext.client.widgets.layout.AccordionLayout` 类,可以创建如图4所示的手风琴效果,其中每个子Panel只显示一个,其他被折叠。 在GWT-Ext中,布局管理器是构建用户界面的关键组件,它们决定了组件如何...
通过`layout: 'accordion'`启用,可以设置`layoutConfig.animate`为`true`实现动画效果,增加交互性。 6. Card布局: Card布局类似于翻页或步骤向导,一次仅显示一个子组件。`activeItem`属性指定当前可见的子组件...
- **layout**:涵盖多种布局模式,如absolute、accordion、border等,用于构建复杂的用户界面。 这些章节深入浅出地展示了ExtJs4的强大功能和灵活性,为开发者提供了丰富的参考资料,无论是新手还是经验丰富的...