EXT is now talking about basic issues

1. Ext. Get

EXT is used to obtain the element function. It is still widely used and can obtain the element we need through many ways. This element includes many interesting functions.

Element and document. the DOM objects obtained by getelementbyid ('mydiv ') are different. Although you can use the old method to obtain the specified ID element, the common operations provided by ext are lost, such as animation, positioning, CSS, and so on. Even if Ext. get () gets mydiv, or you can directly access document. getelenmentbyid (), which is simple and can directly access document. the part that should be obtained by getelement (), ext. get (). dom.

1.1 first obtain an element

var myDiv = Ext.get(‘myDiv‘);

You can see <Div id = 'mydiv '> in HTML, and then use Ext. get ('mydiv ') gets this Div from HTML and encapsulates it as an element object. Now this object has been saved to the cache and will be faster to use later.

1.2 most eye-catching is the animation effect

myDiv,addClass(‘red‘);

2. If we want to get a bunch of Elements

2.1 select all <p> Elements

Ext.select("p").highlight();

2.2 select by CSS class

First, we have several divs that use class = "red", and then let them all flash and call highlight ().

Ext.selsect("div.red").highlight();

2.3domhelper and template dynamically generate html

Generating HTML elements with Dom has always been a headache. Now in ext, let's look at his own implementations.

var list = Ext.DomHelper.append(‘parent‘,{tag:‘div‘,cls:‘red‘});

Add a div element to the element id = parent.

As described in the document, in the second parameter {}, all except four special attributes are copied to the attributes of the newly generated element. These four special attributes are

1. Tag tells us what tag to generate, Div or span, and so on

2. CLs refers to the class attribute in the <Div class = 'red'> </div> label. Because class is a keyword, it should be written as classname normally.

3. Children refers to the child node. Its value is an array containing many nodes.

4. html, corresponding to innerhtml. I think it is too cumbersome to use children to describe the HTML content in the node directly.

In addition to append, domhelper also has several methods to specify the location where the new node is added.

A. insert it after the specified node:

Ext.DomHelper.append(‘parent‘,{tag:‘p‘,cls:‘red‘,html:‘append child‘});

 

B. inserbefore. The new node is inserted before the specified node.

Ext.Domheper.insertBefore(‘parent‘,{tag:‘p‘,cls:‘red‘,html:‘insert before child‘})

C. insertafter. Insert the new node to the end of the pointing node.

D. Overwrite, which replaces the innerhtml content of the specified node.

Ext.DomHelper.overwriter(‘child3‘,{tag:‘p‘,cls:‘red‘,html:‘overwrite child‘})

 

2.4 batch generation or template required

2.5 batch top filling, mastertemplate and xtemplate

3. Ext. Data namespace

The namespace Ext. Data defines a series of store, reader, and proxy. Both grid and comboxbox use this media to obtain data. This feature has many benefits, such as asynchronous loading, type conversion, and paging. It supports array in this form, data in JSON and XML formats can be obtained through memory, HTTP, scripttag, etc. In the early morning, if you want to implement new protocols and data structures, you only need to expand reader and proxy. Dwrproxy implements its own proxy and reader, allowing ext to directly obtain data from DWR.

3.1proxy Series

3.1.1memoryproxy

This memoryproxy can only obtain data from JS objects. You just need to put an Arry, JSON, or XML file in it.

var proxy = new Ext.data.MemoryProxy([      [‘id1‘,‘name1‘,‘descn1‘],      [‘id2‘,‘name2‘,‘descn2‘]]);

3.1.2httpproxy

Use the HTTP protocol and use ajax to retrieve data from the backend proxy. when constructing the proxy, set a URL: "XXX. jsp" so that he can know where to find the data.

var proxy = new Ext.data.HttpProxy({url:‘xxx.jsp‘});

The background needs to be designed to return the corresponding data.

reponse.setContentType("application/x-json");writer out = response.getWriter();out.ptint("["+                     "[‘id1‘,‘name1‘,‘descn1‘]"+                     "[‘id2‘,‘name2‘,‘descn2‘]"+ "]");

Httpproxy does not support cross-origin. It can only obtain data from the same domain.

3.1.3scripttagproxy

This can be cross-origin, but this operation must be performed in the background.

String cb = request.getParameter(‘callback‘);response.setContentType(‘text/javascript‘);Writer out = response.getWriter();out.write(cb+‘(‘);out.print("["+               "[‘id1‘,‘name1‘,‘descn1‘]"+               "[‘id2‘,‘name2‘,‘descn2‘]"+              "]");out.write(");");

The secret is that the callback parameter is obtained from the request, called the callback function.

3.2reader Series

Read the original database and parse it to convert it into a record, so that it can be used by Ext. Data. Store.

3.2.1 simple and easy arrayreader

3.2.2 flexible and lightweight jsonreader

3.2.3 prestigious xmlreader

3.3 believe you know how to add

In fact, you don't have to integrate proxy, reader, and store every time. In fact, you can choose some integration solutions to see what ext provides for us?

1. simplestore = store + memoryproxy + arrayreader

var ds = Ext.data.SimpleStore({       data:[                [‘id1‘,‘name1‘,‘descn1‘],                [‘id1‘,‘name1‘,‘descn1‘]        ],       fields:[‘id‘,‘name‘,‘descn‘]});

2. jsonstore = store + httpproxy + jsonreader

var ds = Ext.data.JsonStore({      url:‘xxx.jsp‘,      root:‘root‘,      fields:[‘id‘,‘name‘,‘descn‘]});

 

4. JSON

4.1ext support for JSON

4.2 reverse operation, ext converts JSON into a string

4.3 Scope

In JS, this has been used for a long time. I only use specific examples to tell you what problems may occur.

A common scenario is when Ajax callback functions are used.

We want to press this button and use ajax to read data from the background, and then put the response data in text.

It is easy to use Ext. Get ("text") to re-obtain the object, but in some cases it is not easy to obtain the object to be processed. How can I save the operation objects obtained before Ajax?

Method 1: Set scope in Ajax

function doSuccess(response){        this.dom.value = response.responseText;  }Ext.lib.Ajax.request(        ‘POST‘,        ‘08-07.txt‘,        {success:doSuccess,scope:text},        ‘param‘ + encodeURIComponent(text.dom.value));

Add a scope: Text in the callback parameter of Ajax and point the scope of the callback function to text. Its function is to point this in the dosuccess function to the text object. So tired, change dosuccess to this. Dom. value.

Method 2: Add createdelegate () to success ().

function doSuccess(response){       this.dom.value = response.responseText;  }Ext.lib.Ajax.request(      ‘POST‘,      ‘08-07.TXT‘,      {success:doSuccess,createDelegate(text)},      ‘param‘ +encodeURIComponent(text.dom.value));

Createdelegate can only be called on the function. It forces this in the function to point to the desired object, and then use this in dosuccess.

If you want me to select scope, I will try to select scope, because createdelegate still needs to generate a lot of things pointing.

 

5. menus and toolbar

6. Events

EXT follows a single event model. As long as any control inherits Ext. util. obserbable, it certainly supports events. You can define a series of events for this object and configure listeners for these events. When an event is triggered, the listener is automatically called, all these are the ext event models.

We also inherit Ext. util. observale to implement a support event object.

Person = function(name){    this.name = name;    this.addEvents("walk","eat","sleep");}Ext.extend(Person,Ext.util.Observable,{       info:function(event){                   return this.name+‘is‘+event+‘ing.‘;  }});

Here, the object is called person, and there is an attribute name. This is called during initialization. the addevents () function defines three events: Walk, eat, sleep, and ext. extend () allows person to inherit Ext. util. all the attributes of the observable. By the way, we have added an info () function to let it return the information of person.

Let's create a person instance in HTML and configure the listener for all its events.

var person = new Person(‘Lingo‘);person.on(‘walk‘,function(){        Ext.Msg.alert(‘event‘,person.name+"走");});person.on(‘eat‘,function(){        Ext.Msg.alert(‘event‘,person.name+"吃"+breakfast+lunch+supper);});person.on(‘sleep‘,function(){        Ext.Msg.alert(‘event‘,person.name+"从"+time.format(‘H‘)+‘点开始睡觉‘);});

Here, on () is the abbreviated form of addlistener (). Its functions are identical. The first parameter transmits the event name, and the second parameter executes the function when an event occurs, here we want to make it easy to write in the Alert form.

Ext.get(‘walk‘).on(‘click‘,function(){       person.fireEvent(‘walk‘);});Ext.get(‘eat‘).on(‘click‘,function(){       person.fireEvent(‘eat‘,‘早餐‘,‘中餐‘,‘晚餐‘);});Ext.get(‘sleep‘).on(‘click‘,function(){       person.fireEvent(‘sleep‘,new Date());});

All right, when you call fireevent (), the event will be triggered. Just pass in an event name as a parameter, and the listener functions corresponding to this time will be executed.

The following is a big offer that can only be enjoyed by dynamic languages. You just need to write the parameters you want to pass to the listening method in fireevent (), regardless of the number of parameters, you don't need to worry about parameter types, strings, numbers, dates, arrays, and passing in whatever you want, but you need to be sure that the listener function can process the parameters you passed in the past.

 

Just as on is short for addlistener, removelistener is short for UN, which can delete the listener function corresponding to an event.

var fn = function(){};person.on(‘walk‘,fn);person.un(‘walk‘,un)

There is also a purgelisteners () function that can delete all listeners, note that all listeners.

 

EXT is now talking about basic issues