How to use Extjs4 up and down

 usage of up () and down () in Extjs4extjs4.x, each component has a new addition of two method up () and down () methods. Both of these methods are used to get the component, so let's look at the official explanation of the up () method and the Down () method.

In extjs4.x, the new two method up () and down () methods are added. Both of these methods are used to get the components, let's look at the official explanation below.

Up (String selector, [number/mixed maxDepth]): Ext.core.Element

Selector: required, in string form, representing the component to match.

Maxdepth: Optional, indicating the maximum depth to match.

The API for the UP method is interpreted as: with a simple selection, to get the matching DOM, using the UP method always returns a Ext.core.Element, which is the component of Ext.

Down (String selector, [Boolean returndom]): htmlelement/ext.core.element

Selector: required, in string form, representing the component to match,

Returndom: Optional, Boolean type, if True, returns a DOM node instead of Ext.core.Element. The value defaults to False.

The API interpretation of the down method, through selectors, to obtain any sub-component of depth, in the down method, should not contain the ID of the component, but should be the xtype of the component.

Let's take a look at his usage. Look at the code first.

2. Ext.require (' ext.* ');
4. Ext.onready (function () {
6. var win = ext.create (' Ext.window.Window ', {
8. height:160,
10. width:280,
12. Title: ' User login ',
14. Closeaction: ' hide ',
16. Closable: false,
18. Iconcls: ' win ',
20. Layout: ' fit ',
22. Modal: true,
24. Plain: true,
26. Resizable: false,
28. items:[{
30. Xtype:' form ',
32. items:[{
34. //..... 
36. }],
38. button:[{
40. Text:' login ',
42. Handler:function () {
46. }
48. }]
50. }]
52. })
54. });

Ext.require (' ext.* '); Ext.onready (function () {  var win = ext.create (' Ext.window.Window ', {   height:160,   width:280,   title: ' User Login ',   closeaction: ' Hide ',   closable:false,    iconcls: ' Win ',   layout: ' Fit ',   modal:true,    Plain:true,   resizable:false,   items:[{    xtype: ' form ',    items:[{     //...     }],    button:[{     text: ' Login ',     handler:function () {           }}]})  });

In this code, we created a window and then added a form to the window. Finally, a button is added. Button's handler, we define a function. Next, we add code to this function.

1. var form = this.up (' form '). GetForm ();

var form = this.up (' form '). GetForm ();

The this.up is used here. Specifically explained below. Here this. is the button component, and up (' form ') refers to the matching form component. So together, we get the form component, and we get the whole form.

In this case, we don't need the down method. Because either the form or window is acquired. We can use This.up (' form ') or this.up (' window ') to get the form component and the window component.

To introduce the down method. We'll complicate the whole process.

1. var form = this.up (' window '). Down (' form '). GetForm ();

var form = this.up (' window '). Down (' form '). GetForm ();

I'm sure you understand that this.up (' window ') gets the top-level window component. It then uses the down () method to obtain the sub-component form component of window, and finally uses getform () to obtain the entire form.

Conclusion: In Extjs4, ExtJS adds the up () and down () methods to each component, which makes it easier to get the parent and child components of each component. Of course, in addition to these methods, ExtJS also adds a more powerful Componentquery class, through which we can use more methods to find whatever components are needed. The use of specific componentquery

Thank http://blog.csdn.net/li_xiao_ming/article/details/7063610 for sharing

How to use Extjs4 up and down