Extended text field

Ext. Field. Text is just a simple input box. If a value is input, an 'X' button will appear at the end,

If you want to put another button on the text box and lable it, how do you expand the image?

Its parent class Ext. Field. Field inherits Ext. decorator, that is, all Ext. Field. Field subclasses have the feature of Ext. decorator-

You can specify component.

For the simplest text field, the specified component is the input class, and the type is text.

That is to say, the core of text field is the Ext. Field. input class.

Take a lookSource codeWe can see that the input box is implemented by rewriting the gettemplate of Ext. component.

There are three items in total: input, clearicon, and mask. At first, only the input is displayed. clearicon, that is, 'x' button, is not displayed through CSS (display: None) control,

CSS (display: Block) is changed for display only when a value is input.

----------------------------------------------------------------

 Gettemplate  :  Function  ()  {
 VaR  Items  =  [  {  Reference  :  'Input'  ,  Tag  :  This  .  Tag  },  {  Reference  :  'Clearicon'  ,  CLS :  'X-clear-Icon'  }  ];  Items  .  Push  ({  Reference  :  'Mask'  ,  Classlist  :  [  This  .  Config  .  Maskcls  ]
  });
 Return  Items  ;
  } 

----------------------------------------------------------------

If the text field is extended, one method is 1) inherit the Ext. Field. input class, override the above method, and specify the item to be added.

2) inherit Ext. Field. text, and specify component as 1) class created.

 

Another method is to add the required element to the desired location through appendchild/replacewith/insertafter/insertbefore and other methods.

I want to add a '+' button for the text field to respond to an event.

Bytes ---------------------------------------------------------------------------------------------

Ext. Define ('myaddfield ',{
Extend: 'ext. Field. text ',

Config :{

Clearicon: false,

Addbutton: True // Add button Configuration Attribute
},

...

// This method is automatically executed when the class is instantiated.

// Create the Ext. Element Object using the Ext. element. Create method, and then append the object to the current (input field) element.

Updateaddbutton: function (newbutton, oldbutton ){
VaR me = This,
Innerelement = me. innerelement;

If (newbutton! = Oldbutton ){

If (newbutton ){

This. addbutton = ext. element. Create ({
CLS: CLS + '-click' + CLS +'-button-up ',
HTML: '+'
});

This. addbutton. On ('tap', this. onaddbutton)

Innerelement. appendchild (Me. addbutton );
}
}
}

...

})

Bytes ---------------------------------------------------------------------------------------------

Sencha touch2.1's replacewith method has a bug and needs to be corrected. Rewrite the bug as follows:

Bytes --------------------------------------------------------------------------------------------

Ext. Dom. element. addmembers ({
Replacewith: function (EL ){
VaR me = this;

If (El. nodetype | El. Dom | typeof El = 'string '){
// El = ext. Get (EL );
// Me. Dom. parentnode. insertbefore (El, me. DOM );

// Change El to El. Dom.

Me. Dom. parentnode. insertbefore (El. Dom, me. DOM );
} Else {
El = ext. Core. domhelper. insertbefore (Me. Dom, El );
}

Delete Ext. cache [Me. ID];
Ext. removenode (Me. DOM );
Me. ID = ext. ID (Me. DOM = El );
Return me;
}
});

Bytes --------------------------------------------------------------------------------------------