Home > Developer > Web Develop

ExtJS Study notes-building an experimental environment

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

    1. 1. Purpose

Build a ExtJS infrastructure in Eclipse and learn how to build a new ExtJS project from the official downloaded code

    1. 2. Problems encountered during the learning process
      • the difference between EXT-4.2.1-GPL and ext-4.2.1-commercial

EXT-4.2.1-GPL: Open source version, using GPL open source protocol

Ext-4.2.1-commercial: Commercial version, charge, stable

As a personal study, EXT-4.2.1-GPL can be used.

      • description of each file in the downloaded ExtJS directory

Main directory Description

      • Builds directory: Compressed ExtJS code, smaller, faster, but generally not used;
      • CMD directory: Unknown, personal understanding is used for ExtJS command line mode, generally not
      • Docs directory: development documentation;
      • Examples Directory: official demo example;
      • Locale directory: Multi-language resource files, user localization, such as the need to select Simplified Chinese, the need to introduce simplified Chinese files;
      • Packages Directory: ExtJS each part of the function of the packaging files;
      • Plugins directory: ExtJS used in the plug-in, mainly flash-related plug-ins
      • Resource directory: ExtJS required CSS and image files;
      • SRC Directory: Uncompressed source code Directory
      • Welcome directory: Home page of the required style, pictures and other documents

Main Document Description

      • Bootstarp.js:ExtJS Library boot file, can automatically switch ext-all.js and ext-all-dev.js by parameters;
      • Ext-all.js,ext-all-dev.js,ext-all-debug.js,ext-all-debug-w-comments.js: This is a group that contains all the ExtJS files. Each file represents a usage scenario: the operating environment, the development environment, the debugging environment, and the Annotated debugging environment.
      • Ext-all-rtl.js,ext-all-rtl-dev.js,ext-all-rtl-debug.js, Ext-all-rtl-debug-w-comments.js: These four are a group that supports right-to-left languages (like Hebrew and Arabic). Each file represents a usage scenario: the operating environment, the development environment, the debugging environment, and the Annotated debugging environment.

Instance:

      • Ext.js,ext-dev.js,ext-debug.js,ext-debug-w-comments.js: These four are a group that represents the most streamlined ExtJS code. Each file represents a usage scenario: the operating environment, the development environment, the debugging environment, and the Annotated debugging environment.
      • Ext-theme-access.js,ext-theme-classic.js,ext-theme-classic-sandbox.js,ext-theme-gray.js,ext-theme-neptune.js: These are a group, with ext JS of different styles to use.
      • File-header.js: Unknown. The file is empty.
      • bootstrap.js file function: Load different JS files according to different situations. 
/**/
      • files needed to create a new web App

The files you need to create a new standard web app are:

1.bootstrap.js,ext-all-dev.js,ext-all.js: Used to load the basic EXTJS environment.

2.locale\ext-lang-zh_cn.js: Used to support Chinese.

3.resources Catalog: Used to load styles and pictures, etc.

      • Spket Plug-in installation configuration

1. Download the installation Spket:

Installation path: Http://www.agpad.com/update

2. Configuration

      • Helloword Construction
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><!--ExtJS File -<Scripttype= "Text/javascript"src=".. /.. /js/bootstrap.js " ></Script><!--Chinese Language Pack -<Scripttype= "Text/javascript"src=".. /.. /js/locale/ext-lang-zh_cn.js " ></Script><!--Style file -<Linkrel= "stylesheet"type= "Text/css"href=".. /.. /js/resources/css/ext-all.css " /><title>Insert Title here</title></Head><Body>    <Scripttype= "Text/javascript">Ext.onready (function() {Ext.MessageBox.alert ('title', 'Hello world!');    }); </Script></Body></HTML>
      • Neptune Skin Usage Instructions
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><!--ExtJS File -<Scripttype= "Text/javascript"src=".. /.. /js/bootstrap.js " ></Script><!--Chinese Language Pack -<Scripttype= "Text/javascript"src=".. /.. /js/locale/ext-lang-zh_cn.js " ></Script><!--Sea Wen Xing style file -<Linkrel= "stylesheet"type= "Text/css"href=".. /.. /js/resources/ext-theme-neptune/ext-theme-neptune-all.css " /><!--than need to add, otherwise there will be style problems -<Scriptsrc=".. /.. /js/ext-theme-neptune.js "type= "Text/javascript"></Script><title>Insert Title here</title></Head><Body>    <Scripttype= "Text/javascript">Ext.onready (function() {Ext.MessageBox.alert ('title', 'Hello world!');    }); </Script></Body></HTML>

And I have stressed that it is important to introduce the theme of the corresponding JS file, if not the reference will become this:

Look closely at the Close button icon in the upper right corner to offset



Sdjnzqr
Source: http://www.cnblogs.com/sdjnzqr/
Copyright: This article is owned by the author and the blog Park
Reprint: Welcome reprint, but without the consent of the author, this paragraph must be retained; The original link must be given in the article; otherwise, legal liability

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
pmp study notes chromecast experimental extjs php extjs timeline extjs template extjs pricing extjs charts

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More