EXT experience collection

Source: Internet
Author: User

1. Common classes in ext

I. Ext. Data
Ext. Data encapsulates data-related classes.

Ii. Ext. Data. Store
Store is the encapsulation of data sources. EXT provides a unified interface through store to access different data sources, from arrays to Ajax data sources. This unified interface makes data components easier to design and use. When designing components that use data, you only need to care about the interfaces provided by the store, rather than the source of the underlying data. The isolation between data consumption components and underlying data sources is more conducive to the expansion of new data types.ProgramYou can.
Store has two key config options:
A. proxy data proxy, ext. Data. dataproxy. This is part of the store used to manage low-level data.
B. read reader data, ext. Data. datareader. This is a member of the store that reads data. It defines the structure of the underlying data.
Store also supports inline data, which is specified using data config option. For example:
Store: New Ext. Data. simplestore ({
Fields: ['text'],
Expanddata: True,
Data: ['directory', 'project', 'two']
}),

Store has several sub-classes: groupingstore, jsonstore, and simplestore.

Important Method: Load

Iii. Data View class. Mainly include Ext. dataview, ext. Grid, ext. Form, etc.

Data View class: displays or operates data on a visual interface. The data source of the data view class is store. This unified interface is used to combine with different data sources. When the data in the store changes, it is displayed on the interface. Config option is store.

Ext. dataview is a bit special, because this class does not have a predefined display mode, but you need to specify the display template (ext. xtemplate class, supports simple template language ). Similar to others.

3. viewport
When I first started using Ext, viewport had plagued me for a long time. I can't find too many available materials in the help, so I can only find them slowly.
Viewport uses region to define the display of each block. Let's look at the examples in ext API document, which are all listed. At the beginning, I didn't understand what region was doing. Later, I gradually understood it. Only the center is required for each region.

4. Panel
At the beginning, let's look at an example, use Panel as the header, and try to create a header. We found that there is a box (when border: True) under the elements in the panel ), it cannot be deleted. ViewCodeYou can find that your element is located in the front of the panel element, followed by a "bwrap" area, which is the box. Later, I used examples to solve the problem. There are three conditions:
A. Set layout of the Panel to anchor.
B. define your own elements in the items of the Panel.
C. Specify the xtype as the box element.
Example:

New Ext. Panel {
Border: false,
Layout: 'anchor ',
Region: 'north ',
CLS: 'twhead ',
Height: 60,
Items: [{// defined in items
Xtype: "box", // The specified type is box.
El: "twheader", // your own element ID
Border: True,
Anchor: "an_twheader"
}]
})

5. Ext objects have different behavior before and after render.

Today, the program uses gettoptoolbar to retrieve the top toolbar. It does not return the Ext. toolbar object. It is strange to check it repeatedly. Later, we found that, after the object is render, The gettoptoolbar is correct. Before the render, the returned value is incorrect.

6. ownerct: direct parent element of the object

7. Ext. Form. formpanel object

I. Submit method. The formpanel. getform (). Submit () method advances the current form. The getform method returns the basicform of the current formpanel and calls the submit method of the basicform to submit the form. The submit method has some parameters. The success and failure parameters determine the execution functions for success and failure respectively. The submit method requires the format of the returned data. If the errorreader of form is not specified, ext considers that you return a JSON expression and runs it through Ext. Decode. The request for this response is: The success data item must be available to indicate whether the call is successful. The success function specified in submit is triggered only when everything is normal and success is true. Otherwise, failure is triggered. One exception is that when the returned result is blank, the success function will also be triggered.

8. ComboBox

The name attribute stores the name of the display variable, which stores the display value of the selected row, which is generally the meaning of the Code.
The value variable name is stored in the hiddenname attribute, which stores the internal value of the selected row, which is generally the corresponding code
Displayfield: the name of the field used for display in the store used by ComboBox, corresponding to name
Valuefield: In the store used by ComboBox, store the code value field name, corresponding to hiddenname

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.