收藏本站 收藏本站
积木网首页 - 技术学院 - 软件测试 - 网站黄页 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > extjs > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

ExtJS扩展 垂直tabLayout实现代码

但ExtJS中的TabPanel只能水平显示,搜索了一下Ext论坛,发现有垂直TabLayout的扩展,但垂直tab的页签内容是水平显示的,且页签多了之后也不能通过设置enableScroll属性使其能滚动,为了适应项目的需求,本人对TabLayout进行了扩展,使其支持垂直页签显示,支持页签很多时的滚动。效果如下:
查看图片
该组件有两种使用方式,一是扩展方式,二是复写方式。其中第一种方式需要引入附件中的TabPanel.js以及ext-patch.css,同时需要将两个图片放在ext-patch.css同目录下,在创建组件时需要创建Ext.ux.TabPanel;
例:

aa = new Ext.ux.TabPanel({
tabPosition: 'left',
autoScroll: true,
deferredRender: false,
activeTab: 0,
enableTabScroll: true,
applyTo: 'aaa',
items: [
bb = new Ext.Panel({layout:'fit',
title:'基础资料',
iconCls:'aaa',
closable: true,
html: '基础资料'
}),cc = new Ext.Panel({layout:"fit",
title:"基础资料",
closable: true,
html: '基础资料'
})]
});

第二种方式需要引入附件中的TabPanel2.js以及ext-patch.css,同时需要将两个图片放在ext-patch.css同目录下,在创建组件时需要创建Ext.TabPanel。
例:

aa = new Ext.TabPanel({
tabPosition: 'left',
autoScroll: true,
deferredRender: false,
activeTab: 0,
enableTabScroll: true,
applyTo: 'aaa',
items: [
bb = new Ext.Panel({layout:'fit',
title:'基础资料',
iconCls:'aaa',
closable: true,
html: '基础资料'
}),cc = new Ext.Panel({layout:"fit",
title:"基础资料",
closable: true,
html: '基础资料'
})]
});

两种使用方式展现效果相同,tabPosition属性同时支持top/right/bottom/left。

附件文件说明:
TabPanel.js 扩展Ext.TabPanel
TabPanel2.js 复写Ext.TabPanel中的相关方法
ext-patch.css 本文组件所使用的css
*.gif 为设置了enableScroll属性时需要的两个滚动按钮图片
打包下载

ExtJS GTGrid 简单用户管理
部分源码:%@pagelanguage="java"pageEncoding="GBK"%%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%c:setvar="ctx"value="${pageContext.request.contextPath}"/htmlheadtitle用户管理首页/

extjs 列表框(multiselect)的动态添加列表项的方法
因为它这个是创建时自动加载的ArrayStore(关键字是:data:ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框

Extjs ajax同步请求时post方式参数发送方式
ajax同步请求一般下面这样:varconn=Ext.lib.Ajax.getConnectionObject().conn;conn.open("POST",'http://localhost:8080/struts2study/TreeDDGet?node=-1',false);//这里的conn对象其实就是xml

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号