Extjs review your notes (c)

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.

分类:Web 时间:2010-10-28 人气:169
分享到:
blog comments powered by Disqus

相关文章

  • javax.servlet.ServletException: Neither BindingResult nor plain target object solution 2010-03-29

    Arising from the use Spring MVC exception as above: javax.servlet.ServletException:Neither BindingResult nor plain target object for bean name 'xxx'available as request attribute Solution: Note that jsp page form in the modelAttribute = "xxx", x

  • Will the brothers, MZTreeView incident response issues? 2010-08-02

    Recently used the mztreeview departments to do the tree, before the controller to do is put the treelist thrown page loop, the initialization method called treelist method. Now due to demand change, not into the initialization, the individual was a w

  • JQ iframe object for the parent page 2010-03-12

    $ ("# Abc", window.parent.document)

  • Add to the effectiveness and incident response TextView 2010-11-25

    Read ApiDemo source last night to com.example.android.apis.text.Link class. First, look at the effect of its operation: TextView together to give effect, there are several main methods: The first, automatic application results, use android: autolink

  • Incident response support to TextView Intent 2010-11-25

    Press one of the ways to respond to the TextView with the event, however, is limited to web, email, phone, map, such as several, if you want to jump in clicks to your Activity to how to achieve it? Look at the code it! This is the Activity Code: @Ove

  • ViewGroup touch on the understanding of Incident Response 2010-12-12

    ViewGroup touch event is received by dispatchTouchEvent (MotionEvent event) to be distributed to the child view in the event. Touch the beginning of the event action is ACTION_DOWN, viewgroup calls onInterceptTouchEvent (MotionEvent ev) method return

  • Of rights management and the realization of the object model 2009-09-05

    Module title <!--== S -> <!--== S to vote polling --><!--== E article --><!-- S (which will increase only to see the effect of style, performance is basically set by the Editor Control) -- > Contents: 1. Rights Management Analysis

  • document object learning 2010-07-08

    getElementById method <div><p>test world</p></div> var e = document.getElementById('div2'); //1,DIV,null alert("nodeType:" + e.nodeType+ "\n" + "nodeName:" + e.nodeName +"\n" + "nodeValu

  • The OBJECT element in the browser using an embedded Flash elements and differences EMBED 2010-11-17

    Standard reference OBJECT element defines an embedded object. The introduction of the original intention is to replace IMG and APPLET elements. However, because of security and other reasons and the lack of browser support, this intention did not mat

  • js in the window document object 2010-04-26

    js in the basic object is the basis of our operation of the document, including window document is the most basic, the first window to see it, \ window: He is the largest object in JavaScript, which is described in a browser window. Generally refer t

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.096 (s). 12 q(s)