国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > EXTJS 组件开发(完整例子)

EXTJS 组件开发(完整例子)

来源:程序员人生   发布时间:2015-01-22 09:06:41 阅读次数:2545次

目标:EXTJS组件开发,从component基础实现1个TAB控件。

使用EXTJS版本为5.0。测试通过。

这个例子还很低级,仅仅是说明通过示例使用EXTJS进行组件开发的1个基本思路。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EXT JS TEST</title> <link rel="stylesheet" type="text/css" href="extjs/resources/ext-theme-classic-all.css" /> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .tabsDiv{ width:500px;height:450px; margin-top: 0px; margin-left: 0px; } .tabsDiv ul{ width: 500px;height: 20px; list-style: none; margin-bottom: 0px;margin: 0px; padding: 0px; border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-top:solid 1px #ffffff;border-bottom:solid 1px #e0e0e0; } .tabsDiv div{ width: 500px;height: 330px; background-color: #ffffff; border:solid 1px #e0e0e0; } .tabsSelectedLi{ width: 100px;height: 20px; background-color: white; float: left; text-align: center; border-left:solid 1px #e0e0e0;border-right:solid 1px #e0e0e0;border-top:solid 1px #e0e0e0;border-bottom:solid 1px #ffffff; cursor:default; } .tabsUnSelectedLi{ width: 100px;height: 20px; background-color: #e0e0e0; float: left; text-align: center; border:solid 1px #e0e0e0; cursor:default; } </style> </head> <body> <script lang="javascript"> //引入面板类  Ext.require('Ext.panel.Panel'); //定义组件 Ext.define('Ext.ux.TabControl', { extend: 'Ext.Component', // subclass Ext.Component alias: 'widget.managedTabs', // this component will have an xtype of 'managedTabs' renderTpl:'<div id="mytabs" class="tabsDiv"><ul></ul></div>', // Add custom processing to the onRender phase. onRender: function () { this.callParent(arguments); this.init(); }, //最后选中项 lastSelectedIndex:0, //获得选中TAB头的索引 getSelectedIndex: function(selectObj){ var extLis = this.el.query("div>ul>li"); for(var i=0;i<extLis.length;i++){ if(extLis[i] == selectObj){ return i; } } }, init :function(){ var me = this; for(var i=0;i<2;i++){ this.insertPage(i⑴,'tabControl'+i); } var extLis = this.el.query("div>ul>li"); for(var i=0;i<extLis.length;i++){ extLis[i].onclick = function(){ var idx = me.getSelectedIndex(this); me.selectPage(idx); } } }, //选中某页 selectPage: function(idx){ var extUl = this.el.query("div>ul>li"); extUl[this.lastSelectedIndex].className = "tabsUnSelectedLi"; extUl[idx].className = "tabsSelectedLi"; var extDiv = this.el.query("ul~div"); extDiv[this.lastSelectedIndex].style.display = "none"; extDiv[idx].style.display = "block"; this.lastSelectedIndex = idx; }, //插入页 insertPage: function(idx, title){ //var extEl = this.el.query("div:first-child"); var extLi = this.el.query("ul>li"); if(extLi.length<1){ var extUl = this.el.query("div>ul"); Ext.DomHelper.insertFirst(extUl[0], '<li class="tabsUnSelectedLi">' + title + '</li>'); }else{ Ext.DomHelper.insertAfter(extLi[idx], '<li class="tabsUnSelectedLi">' + title + '</li>'); } var extDiv = this.el.query("ul~div"); var extUl = this.el.query("ul"); Ext.DomHelper.insertAfter(extDiv[idx] || extUl[0], '<div>'+ title + '</div>'); } }); Ext.onReady(function () { var tab = Ext.create('Ext.ux.TabControl'); Ext.create('Ext.panel.Panel', { header:true, title: 'TabControl Panel', height: 200, width: 400, renderTo: Ext.getBody(), items: tab }) tab.selectPage(1); }); </script> </body> </html>

终究效果如图:


生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生