Ext. toolbar component

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

2. <SCRIPT type ="Text/JavaScript">
4. Ext. onready (Function(){
6. VaRNewt =NewExt. toolbar ({
8. Width: 300,
10. });
12. Newt. addbutton ([
14. {
16. Text:'I am a button',
18. Handler: onbuttonclick
20. }
22. ]);
24. FunctionOnbuttonclick (BTN ){
26. Alert (BTN. Text );
28. }
30. Newt. Render (ext. getbody ());
34. });
36. </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

2. <SCRIPT type ="Text/JavaScript">
4. Ext. onready (Function(){
6. VaRNewt =NewExt. toolbar ({
8. Width: 300,
10. });
12. Newt. addbutton ([
14. {
16. Text:'I am a button',
18. Handler: onbuttonclick
20. }
22. ]);
24. FunctionOnbuttonclick (BTN ){
26. Alert (BTN. Text );
28. }
30. Newt. addseparator ();
32. Newt. addfield (NewExt. Form. textfield ({width: 50 }));
34. Newt. addfill ();
36. Newt. addseparator ();
38. Newt. addtext ('Static text');
40. Newt. Render (ext. getbody ());
44. });
46. </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

2. <SCRIPT type ="Text/JavaScript">
4. Ext. onready (Function(){
6. VaRNewt =NewExt. toolbar ({
8. Width: 300,
10. });
12. Newt. Add (
14. {Text:'Button 1'},
16. {Text:'Button 2'},
18. '-',
20. NewExt. Form. textfield ({
22. Width: 50
24. }),
26. 'Hello'
28. );
30. Newt. Render (ext. getbody ());
32. });
34. </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.