Ext. toolbar component

Source: Internet
Author: User

Ext. toolbar is a simple tool bar component provided by Ext. You can place various tool bar elements, such as buttons, text, and menu components. Here is an example to get a general idea about how to use the tool bar.

JS Code
  1. <SCRIPT type ="Text/JavaScript">
  2. Ext. onready (Function(){
  3. VaRNewt =NewExt. toolbar ({
  4. Width: 300,
  5. });
  6. Newt. addbutton ([
  7. {
  8. Text:'I am a button',
  9. Handler: onbuttonclick
  10. }
  11. ]);
  12. FunctionOnbuttonclick (BTN ){
  13. Alert (BTN. Text );
  14. }
  15. Newt. Render (ext. getbody ());
  16. });
  17. </SCRIPT>
 
<SCRIPT type = "text/JavaScript"> Ext. onready (function () {var Newt = new Ext. toolbar ({width: 300 ,}); newt. addbutton ([{text: ' ', Handler: onbuttonclick}]); function onbuttonclick (BTN) {alert (BTN. text);} newt. render (ext. getbody () ;}); </SCRIPT>

 

Shown:


The code above creates a very simple toolbar with only one button named "I Am a button ".

The following is a small problem:The control must be appended before the layout is appended.It means: newt. render (ext. the append layout code of getbody () must be displayed after the append of the control. If the code is migrated, the toolbar cannot be displayed normally, but only a small horizontal line is displayed.

 

Next we will write a complicated toolbar:

JS Code
  1. <SCRIPT type ="Text/JavaScript">
  2. Ext. onready (Function(){
  3. VaRNewt =NewExt. toolbar ({
  4. Width: 300,
  5. });
  6. Newt. addbutton ([
  7. {
  8. Text:'I am a button',
  9. Handler: onbuttonclick
  10. }
  11. ]);
  12. FunctionOnbuttonclick (BTN ){
  13. Alert (BTN. Text );
  14. }
  15. Newt. addseparator ();
  16. Newt. addfield (NewExt. Form. textfield ({width: 50 }));
  17. Newt. addfill ();
  18. Newt. addseparator ();
  19. Newt. addtext ('Static text');
  20. Newt. Render (ext. getbody ());
  21. });
  22. </SCRIPT>
<SCRIPT type = "text/JavaScript"> Ext. onready (function () {var Newt = new Ext. toolbar ({width: 300 ,}); newt. addbutton ([{text: ' ', Handler: onbuttonclick}]); function onbuttonclick (BTN) {alert (BTN. text);} newt. addseparator (); newt. addfield (New Ext. form. textfield ({width: 50}); newt. addfill (); newt. addseparator (); newt. addtext ('static text'); newt. render (ext. getbody () ;}); </SCRIPT>

Shown:

 

 

In this way, we can enrich our toolbar! Of course, we can also call a method to add different elements. This is the add method:

 

JS Code
  1. <SCRIPT type ="Text/JavaScript">
  2. Ext. onready (Function(){
  3. VaRNewt =NewExt. toolbar ({
  4. Width: 300,
  5. });
  6. Newt. Add (
  7. {Text:'Button 1'},
  8. {Text:'Button 2'},
  9. '-',
  10. NewExt. Form. textfield ({
  11. Width: 50
  12. }),
  13. 'Hello'
  14. );
  15. Newt. Render (ext. getbody ());
  16. });
  17. </SCRIPT>
 
<SCRIPT type = "text/JavaScript"> Ext. onready (function () {var Newt = new Ext. toolbar ({width: 300 ,}); newt. add ({text: 'button 1'}, {text: 'button 2'}, '-', new Ext. form. textfield ({width: 50}), ''); newt. render (ext. getbody () ;}); </SCRIPT>

Shown:


 

Finally, let's take a look at some of the main methods and common elements provided by the toolbar:


Common elements include:

Ext. toolbar. Button

Ext. toolbar. Fill

Ext. toolbar. Item

Ext. toolbar. Separator

Ext. toolbar. splitbutton

Ext. toolbar. textitem

The main usage of Ext. toolbar is here. If you need to learn more about it, It is King to take a look at the API and practice it yourself.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.