Extjs review your notes (c)

sponsored links
1, ext code by adding elements to the page:

    Ext.onReady(function(){ //onReady Represents the page load time running inside of a function  
        
                var _button = new Ext.Button({
                                        renderTo:document.body, // Or  Ext.getBody()
                                        text:" Determine  ",
                                        minWidth:100
                        }) ;
                
        }) ;


renderTo: the HTML generated by the current object into the specified target object store.

2, to join the elements with function response

    Ext.onReady(function(){
        
                new Ext.Button({
                                        renderTo:Ext.getBody(),
                                        text:" Determine  ",
                                        listeners:{ // Add an event listener  
                                                
                                                "click":function(){ // For the click event of the Add response  
                                                        
                                                        alert(" Welcome to lingyun harboring blog  !") ;
                                                }
                                        }
                        }) ;
                
        }) ;


Can also be new, and then behind the increase in incident response

    Ext.onReady(function(){
        
                var _btn = new Ext.Button({
                                        renderTo:Ext.getBody(),
                                        text:" Determine  "
                        }) ;
                        
                _btn.on("click" , function(){
                                                                
                                                                alert(" Welcome to lingyun harboring blog  !") ;
                                                  }) ;
                
        }) ;


3, with the realization of the event handler to add

    Ext.onReady(function(){
        
                new Ext.Button({
                                        renderTo:Ext.getBody(),
                                        text:" Determine  ",
                                        handler:function(){
                                                
                                                alert(" Welcome to lingyun harboring blog  !") ;
                                        }
                        }) ;
                
        }) ;


With the listener and you can add event handler methods, the main difference is:

handler: specify a function handle, call the default event is triggered, then the default event for the click

listener: This is before the object is initialized, it will be to define a series of events means for programming during the assembly, especially useful.

4, add the text box: Ext.form.TextField

            new Ext.form.TextField({
                                renderTo:Ext.getBody(),
                                fieldLabel:" Name  "
                        }) ;


5, Panel:

The following text box to try to go inside Panel

            var _panel = new Ext.Panel({
                                                renderTo:Ext.getBody(),
                                                layout:"form",
                                                labelWidth:30,
                                                listeners:{
                                                        "render":function(_panel){ // When binding the event when triggered, equivalent to directly add  
                                                                                _panel.add(new Ext.form.TextField({
                                                                                                        id:"txt_name",
                                                                                                        fieldLabel:" Name  "
                                                                                                })) ;
                                                                         }
                                                }}) ;


Which has a layout attribute is used to layout. Mainly has the following:

  • absolute
  • accordion
  • anchor
  • auto Default
  • border
  • card
  • column
  • fit
  • form
  • hbox
  • menu
  • table
  • toolbar
  • vbox
  • Individual can go check Extjs the API, this is mainly about form layout:

    Official document explains:

    This layout manager is specifically designed for rendering and managing child Components of forms. It is responsible for rendering the labels of Fields.
    
    This layout manager is used when a Container is configured with the layout:'form' layout config option, and should generally not need to be created directly via the new keyword. See Ext.Container.layout for additional details.
    
    In an application, it will usually be preferrable to use a FormPanel (which is configured with FormLayout as its layout class by default) since it also provides built-in functionality for loading, validating and submitting the form.
    


    In fact, this layout can also write:

    layout: {
        type: 'vbox',
        padding: '5',
        align: 'left'
    }
    


    Use the vbox layout

    6, a complete little example:

        Ext.onReady(function(){
                            
                    var _panel = new Ext.Panel({
                                                    renderTo:Ext.getBody(),
                                                    layout:"form",
                                                    labelWidth:30,
                                                    title:"TestPanel",
                                                    listeners:{
                                                            "render":function(_panel){ // In the render time generated text box  , Equivalent to directly add  
                                                                                    _panel.add(new Ext.form.TextField({ 
                                                                                                            id:"txt_name",
                                                                                                            fieldLabel:" Name  "
                                                                                                    })) ;
                                                                             }
                                                    }}) ;
                                                    
                                                    
                    
                    new Ext.Button({
                                    text:" Determine  ",
                                    renderTo:Ext.getBody(),
                                    handler:function(){
                                                            // Get the current page of a text box  .
                                                            alert(Ext.getCmp("txt_name").getValue()) ;
                                                    }
                            }) ;
                    
            }) ;
    

    And above there is a similar method Ext.getCmp Ext.getDom.

    Official explanation: the former is Looks up an existing Component by ID , returns The Component, <tt> undefined </ tt> if not found, or <tt> null </ tt> if a Class was found.

    The latter is Return the dom node for the passed String (id), dom node, or Ext.Element.

    Optional 'strict' flag is needed for IE since it can return 'name' and 'id' elements by using getElementById. Here are some examples:

    // gets dom node based on id
    var elDom = Ext.getDom('elId');
    // gets dom node based on the dom node
    var elDom1 = Ext.getDom(elDom);
    
    // If we don't know if we are working with an
    // Ext.Element or a dom node use Ext.getDom
    function(el){
        var dom = Ext.getDom(el);
        // do something with the dom node
    }
    

    Note: the dom node to be found actually needs to exist (be rendered, etc) when this method is called to be successful.

    Returns a HTMLElement.
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Extjs review your notes (c)

  • js add div

    1. Add div Do not mean to add div, add other elements to pass through this way <html> <script language="javascript"> i=1; /*Add a div */ function add(){ //Create a div var my = document.createElement("div"); //Added to the page document.body.a

  • Firebug Guide (b) --- how to use the Firebug command line API to provide debugging js procedures (on)

    Console Tab Overview This tag is mainly used to print the log only. It can also be a time when debugging in javascript as a command-line window to use (similar to Microsoft Visual Studio in the window immediately (immediate window)). And the use of its

  • xKungfoo on the Net indecent horse skills

    XKungfoo today the last day, G in the above linked to make a horse industry chain issues. Some hang indecent horse skills did not say in detail, where the open bar. In fact, some not, that is, skills, and some people have played. The first in a horse hang

  • js a small script

    Removal of elements:

  • javascript basic object-oriented technology (iv)

    Category, constructor, prototype First to illustrate the point: In the above mentioned elements, each a function contains a prototype property, this property points to a prototype object (Every function has a prototype property that refers to a prede ...

  • js Object onclick give dynamic case assignment, dynamic mass parameters

    We first take a look at examples of errors To implement the code above is wrong, because show (certid.value) This direct method on the implementation of the show, but not the correct way to put this case the object is assigned to btn.onclick. If we c ...

  • js Simplified Traditional conversion code

    js Traditional Traditional Traditional Traditional javascript code conversion conversion code Reprint Address: http://www.cnblogs.com/genson/archive/2008/04/16/1004632.html js Simplified, Traditional conversion, IE7 through, Firefox does not pass, the pos

  • javascript form

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>formUtil.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="thi

  • js version of Ant Colony Algorithm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb

  • javascript built-in functions Info

    48. In the old browsers do not perform this JS :<!-- //--> 49. To quote a document-style JS: <script type="text/javascript" src="/blog/aaa.js"> </ script> 50. Specified in the script does not support the browser displ

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries