Ted introduction to extjs 4.1

Document directory

• Explanation language interpreted
• Ext js "standard library" ext JS "standardlibrary"
• Container containers
• Xtype
• Styling
• Hello sencha

Ted introduction to extjs 4.1

First thoughts learning ext JS 4.1

January 17,201 2 | Ted Patrick

Http://www.sencha.com/blog/first-thoughts-on-ext-js/

Translation: ext Chinese network ajaxjs.com/sp42 reprinted. Please keep the information on this page

As a beginner in sencha, I hope to share my 4.1-bit extjs 1.1 learning process. In fact, during my career as a developer, I have been familiar with many development environments and various frameworks and class libraries of applications, so I will make a horizontal comparison, compare the previous experience with the current experience. In general, the sencha framework now provides a relatively complete basic platform, making it easier to build complex applications. This makes me feel very good.

Explanation language interpreted

It must be pointed out that for me, the least habit is that native JavaScript, including the extjs framework, is an explanatory language. Although I said that I am not a stranger to the Interpretation Language, my original intention is that there is a compiler, it prompts "error errors/warning warnings/flag flags, automatic syntax completion, strong type of member variables, return values and parameters" and so on. Due to the impact of Java, It is very efficient and productive to automatically complete the input and prompt errors, these advantages are often only applicable to strongly typed and compiled languages! Lack of these convenient environments and facilities at work allows Javascript
It seems outdated in the development of web technology. However, as I learned about the nature of language interpretation, I realized that I was beginning to enjoy and indulge in it:

• The flexibility of JavaScript is a double-edged sword. The freedom of language is beautiful but full of unexpected traps. It must be avoided with the best practices;
• Modern browsers have provided quite good runtime prompts. For example, Chrome's console and JavaScript debugger are useless;
• Extjs regards JavaScript as a "metalanguage" to support "Oop/MVC/class/loading/polymorphism", which is very beneficial for developing large applications. This feature is not widely seen in other frameworks. Allowing extension components and adopting MVC patterns will be very friendly to programmers.
• It is very efficient to use JavaScript objects and JSON data structures as instance models for data or components. That is to say, it is very easy to remotely Load components. Even a complex component can assign xtype to the JavaScript Object (Object literals. One problem that I often pay attention to now is to format the code to avoid the fear of multiple commas, especially when dealing with complex object litreal.
• The ide I selected is
  Eclipse vjet plugin is a very handy IDE for JavaScript and extjs development. Not afraid of price comparison, it is afraid of goods comparison, this IDE can be said to automatically prompt the best one in several open-source ides.

Ext js "standard library" ext JS "standardlibrary"

Extjs itself provides a series of helper classes and methods to make building programs much simpler. It's really easy to learn how to use Ext. array, ext. Date, ext. String, ext. object, and Ext. loader to process some data. Methods of these public libraries used by each application, such:

Ext.require( [ 'widget.*' , 'layout.*' , 'Ext.data.*' ] );Ext.Array.each( [ 1, 2, 3, 4 ], function( name ) {console.log( name );});Ext.Object.getSize( { age:23 , height:6, name:"Ted" });  //3

Container containers

Extjs provides many container candidates (ext. window. window, ext. panel. panel, ext. container. container, ext. grid. panel, etc.), and allows developers to embed views and complex application logic. In extjs, the container layout behavior is programmable. You can change your container to "vbox" or "hbox" or another Ext. layout. container type during runtime. In addition, you can dynamically adjust the container flex configuration item to a certain value.

Xtype

Xtype is a loose data format in extjs, that is, a simple object can be used to represent and control complex container layers. It is very simple and practical, and solves many UI component problems. I have previously worked on flex and Android, both in XML componentized form. However, because of the tight coupling with the compiler workflow, it is also very troublesome to instantiate and layout components. In an interpreted system, this does not exist anymore. It can be dynamically adjusted immediately, and even remote loading becomes very simple. Xtype is actually a JavaScript Object (Object literal). It is not difficult to parse the JavaScript engine. It is fast on both mobile and desktop. Although you can instantiate the object in general mode
The xtype method has many advantages. The following is an array composed of three xtypes:

[ { xtype: 'container', html:'First Item', flex:1 } ,{ xtype: 'splitter' } ,{ xtype: 'container', html:'Second Item', flex:1,maintainFlex:true } ]

Assign the array to the item configuration item of the container, and the view of several regions will be rendered. I personally think it is simple and elegant. What do you mean?

Styling

I have encountered component styles in different frameworks. Extjs abstracts style issues and puts them completely in CSS for processing. One of the major advantages of using sass/compass source code to generate CSS is that it is easy to modify. In Flex or Android, there is a lack of such hand flexible segments, which are written to death during compilation. Interpreted language is the benefit of interpreted language. It is not difficult to simply modify the tone color of extjs, but there is still a long way to go to learn CSS in deep style.

Hello sencha

This is my first blog post on sencha.com. I 'd like to try to paste a simple example. The following example shows how to create a form containing an image. Paste the following code in the WordPad and open it in the browser.

<!DOCTYPE html>
I will continue to record the journey of learning extjs and touch. I have to learn a lot of things, but if I can share it with you, it's really best.