EXTJS 组件开发（完整例子）

来源：互联网发布：网络信息监测编辑：程序博客网时间：2024/06/05 02:09

目标：EXTJS组件开发，从component基础实现一个TAB控件。

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

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

<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-1,'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>

最终效果如图：

0 0