Ext js authoritative guide excerpt: Implementing ext JS smart prompts in Visual Studio

Source: Internet
Author: User
Tags hasownproperty

Visual Studio (VS) 2008 and 2010 both provide the ability to obtain smart prompts from the JS library file. However, even if you directly use the extjs library file, there are prompts, but they are incomplete, the main reason is that the vs script prompt function is read based on the structure of the native JavaScript Object, while the extjs object definition is completely different from that of the native JavaScript Object, therefore, it is difficult to obtain its attributes and methods. Therefore, to fully support the smart prompts of extjs, you must extract the attributes and methods of the extjs object and then organize it into a JavaScript Object structure that vs can understand, in this way, smart prompts can be implemented.

It is not difficult to extract the attributes and methods of extjs objects. From the ext object structure in DOM tree in Figure 1, we can see that, you can retrieve the attributes and methods of all objects by traversing the ext object once. However, in fact, it is not that easy, because some objects in extjs are instances and some are function objects. For instances, their attributes and methods are directly in the object, for objects in the function form, the attributes and methods are in the prototype, so we need to treat them differently.

Another important issue is the namespace, such as Ext. Menu. Item, ext. Data. Store, or ext. layout. Container. vbox class names of level 3 or Level 4. The problem with recursive traversal is that it is difficult to determine whether the object is a javascript object or an object defined in extjs mode. Therefore, the best way is to use the class name list in the appendix, it is used to traverse objects. This is much simpler. In the list, if the object is an instance and the isobject method of ext is used, its value will be true. Otherwise, the object is a functional object and needs to be instantiated before it can be used, therefore, attributes and methods are in the prototype. However, you must note that there may be static methods. To avoid omission, you must traverse the attributes and methods of the object.

The ext object itself needs to be added. The main reason is that unlike other objects, the object itself or its prototype can be used to extract attributes and Methods. classes in the class list need to be excluded, this can be solved by checking whether the object or function has the "$ classname" attribute.

There is also an object alias problem, which is obtained directly from the alternatetoname attribute in the maps object of the classmanager object, and the alias is directed directly to the object.

The final question is how to output the object to the page, which can be automatically converted using the encode method.

The namespace problem can be solved through the NS method. It will automatically create an object based on the class name, as long as there is no conflict with the ext object.

After the target is confirmed, you can start the work now, create a file named vs-ext.html, and then add the following code:

<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> 

In the code, create a new namespace "vs. Ext" and place the attributes and methods of the object in it.

The processprototype function is used to process non-instance objects. The first loop mainly involves traversing static attributes and methods. The second loop is used to traverse the attributes and methods of the prototype.

The processinst function is used to traverse the attributes and methods of an instance. The hasownproperty method cannot be added here to check whether the attributes or methods have their own attributes. Otherwise, the attributes and methods cannot be found, unless the attributes and methods are added after the instance is created.

Next, we will process the ext object. If the attribute points to an object, we also need to exclude interference from objects such as grid and form. Therefore, we need to check the ext source code and perform some processing on our own.

Next we will enumerate the class. class in JS. First, use the NS method to generate the class namespace, and then split the class name based on the decimal point to get the source object and target scene, then, confirm whether the object is an instance or a non-instance based on the isobject and process it accordingly.

Finally, convert the ext object in the vs object and the alias table in the classmanager object into text and output it to the page.

Open the page in the browser and you will see an output text in JSON format. Select all the text and copy it to a text file named Ext. in the JS file, you can use this file to implement smart prompts in.

To use Ext. JS, first copy the file to the project. Then, different methods are used based on the edited file type.

If it is a separate script (JS extension) file, add the following statement to the script file header:

/// <Reference Path = "[relative path]/EXT. js"/>

Note the path. If the path of the script file to be edited is the same as that of the Ext. js file, the statement is:

/// <reference path="Ext.js" />

The simplest and most direct method is to drag the Ext. js file in Solution Explorer to the edited script file and the statement is automatically generated.

With this statement, enter "Ext." To see the smart prompt 2.

If Ext. jsb2 file (extjs4 seems to be provided in a new method, but this file is not available in general), you can also use the ext. JS files, tested by the author, have the same effect.

Related Article

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.