Vollständiger Code für die Entwicklung von Javascript-EXTJS-Komponenten-js-Tutorial-php.cn

Vollständiger Code für die Entwicklung von Javascript-EXTJS-Komponenten

黄舟

Freigeben： 2017-03-18 15:03:09

Original

1861 Leute haben es durchsucht

Ziel: EXTJS-Komponentenentwicklung, Implementierung einer TABSteuerung aus der Komponentenbasis.

Verwendung von EXTJS Version 5.0. Test bestanden.

Dieses Beispiel ist immer noch sehr einfach und veranschaulicht anhand von Beispielen lediglich eine Grundidee der Verwendung von EXTJS für die Komponentenentwicklung.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

<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>
       
.tabsp{
    width:500px;height:450px;
    margin-top: 0px; margin-left: 0px;
}
 
.tabsp 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;
}
 
.tabsp p{
    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(&#39;Ext.panel.Panel&#39;);
//定义组件
Ext.define(&#39;Ext.ux.TabControl&#39;, {
    extend: &#39;Ext.Component&#39;, // subclass Ext.Component
    alias: &#39;widget.managedTabs&#39;, // this component will have an xtype of &#39;managedTabs&#39;
    renderTpl:&#39;<p id="mytabs" class="tabsp"><ul></ul></p>&#39;,
 
    // 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("p>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,&#39;tabControl&#39;+i);            
        }
         
        var extLis = this.el.query("p>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("p>ul>li");     
        extUl[this.lastSelectedIndex].className = "tabsUnSelectedLi";
        extUl[idx].className = "tabsSelectedLi";
         
        var extp = this.el.query("ul~p");
        extp[this.lastSelectedIndex].style.display = "none";
        extp[idx].style.display = "block";
             
        this.lastSelectedIndex = idx;
    },
     
    //插入页
    insertPage: function(idx, title){
        //var extEl = this.el.query("p:first-child");
        var extLi = this.el.query("ul>li");
         
        if(extLi.length<1){
            var extUl = this.el.query("p>ul");
            Ext.DomHelper.insertFirst(extUl[0], &#39;<li class="tabsUnSelectedLi">&#39; + title + &#39;</li>&#39;);
        }else{
            Ext.DomHelper.insertAfter(extLi[idx], &#39;<li class="tabsUnSelectedLi">&#39; + title + &#39;</li>&#39;);
        }   
         
        var extp = this.el.query("ul~p");
        var extUl = this.el.query("ul");
        Ext.DomHelper.insertAfter(extp[idx] || extUl[0], &#39;<p>&#39;+ title + &#39;</p>&#39;);
         
    }
});
 
 
Ext.onReady(function () {
 
    var tab = Ext.create(&#39;Ext.ux.TabControl&#39;);
 
    Ext.create(&#39;Ext.panel.Panel&#39;, {
        header:true,
        title: &#39;TabControl Panel&#39;,
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        items: tab
    })
 
    tab.selectPage(1);
 
 
});
     
 
</script>
</body>
 
</html>

Nach dem Login kopieren

Der Endeffekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonVollständiger Code für die Entwicklung von Javascript-EXTJS-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!