Learn Extjs5 with me (07--inherit custom one control)

Learn Extjs5 with me (07--inherit custom one control)

the development of ExtJS can follow the principles of OOP, and its encapsulation of classes is perfect. The simplest way to customize a control is to inherit an existing control. As required in the previous section, I made a sub-class of a button. First, based on the directory structure, create an UX directory under the app directory and put the custom controls in this directory. Create a file buttontransparent.js under the UX directory.

/** * Defines a background transparent button class that inherits from Button */ext.define (' App.ux.ButtonTransparent ', {extend: ' Ext.button.Button ',// Continue on Ext.button.Buttonalias: ' Widget.buttontransparent ',//The Xtype type of this class is executed initcomponent when the buttontransparent//class is initialized: function () {//set event listener This.listeners = {//mouse off, background setting transparent Mouseout:function () {this.settransparent ( document.getElementById (this.id));},//mouse over, background cancellation transparent mouseover:function () {var b = document.getElementById (this.id); B.style.backgroundimage = "; b.style.backgroundcolor ="; b.style.bordercolor = ";},//background Set Transparent afterrender:function () { This.settransparent (document.getElementById (This.id));}; This.callparent (arguments); Call your module's initcomponent function},settransparent:function (b) {b.style.backgroundimage = ' inherit '; B.style.backgroundcolor = ' Inherit '; b.style.bordercolor = ' Transparent ';}});

This class continues with the button, only 3 events are added, the background is displayed when the mouse moves over the control, and the background is set to transparent when the mouse is moved. The AfterRender event indicates that transparency is performed after this control is rendered. After this control is complete, you need to introduce this file in top and button, and set the default xtype for the control in items to Buttontransparent. Add the following statements to the Top.js:

Uses: [' App.ux.ButtonTransparent '],defaults: {xtype: ' Buttontransparent '},

Uses the control is introduced, the Defaults property assigns the value of Xtype to the class created in items (if no xtype is specified). So the following code does not have to change, all the original is the button class, will be designated as the Buttontransparent class. These two attribute values are also added to the button.js. now the interface is as follows:
                  you can hide and show the top and bottom areas by completing another feature below. With a button in the bottom area at the last position, when pressed, the top and bottom areas are hidden, and a control that displays the top and bottom is displayed in the upper-right corner. Add a button to specify the handler event in the last part of the Top.js items

{glyph:0xf102,handler: ' Hiddentopbottom ', tooltip: ' Hide top and bottom area '}

Add two functions to the maincontroller.js:

Hide top and Bottom button events hiddentopbottom:function () {//If you want to manipulate a control, the best way is to find the control based on a relative path, using down or up as much as possible and using as little as getcmp () function. This.getview (). Down (' maintop '). Hide (), This.getview (). Down (' Mainbottom '). Hide (); if (!this.showbutton) {// A control that shows the top and bottom, hidden at the top and bottom, appears in the upper-right corner of the page This.showbutton = ext.widget (' component ', {Glyph:0xf013,view:this.getview (), Floating:true,x:document.body.clientwidth-32,y:0,height:4,width:26,style: ' Background-color: #cde6c7 ', listener S: {el: {click:function (EL) {var c = ext.getcmp (el.target.id);//Get Component ID value c.view.down (' Maintop '). Show (); C.view. Down (' Mainbottom '). Show (); C.hide ();}}})}; This.showButton.show ();},//if the size of the window changes and the top and bottom are hidden, adjust the position of the control that displays the top and bottom onmainresize:function () {if (This.showbutton &&!this.showbutton.hidden) {This.showButton.setX (document.body.clientwidth-32);}}

After adding the above code, you can control the display and hiding of the bottom and bottom areas.