If I want to user after pressing button on the left tree close up, how to do? (Examples sucks pleas

In short, Ext JS is Sencha company launched a Web front-end framework for a pure JS provides UI elements will be used for general Web App (buttons, tables, Tab ...) so that you want to make real user flow; and easy Inheritance expanded definition own custom components; in addition also provides many useful JS utility and Ajax Data Source support CRUD do with the back-end perfect fascia fit. In appearance, the default theme is simple but somewhat outdated light blue, but his subject is SASS / Compass for real, so long looking for artists (also see other people!? Is you!), But also can enjoy the sway of . Currently it is mostly used in corporate end internal Web Application based information system (Brastel at least see it as one of the standard UI orz, Also do not know why, in the mainland with the developer community fascia in Japan seem to have well-developed). Personally, I think it has the advantage of good inheritance architecture for fast development and expansion, as well as the full richness of the community, the official support and API (with the benefit of commercial kits is that any surprise that shameless fascia one version fascia on the issue as long as the PO solvable, browser compatibility and other issues are not themselves engage in, it will not call you RTFM); however relative, with jQuery + jQuery UI convenience compared to its disadvantage is relatively fixed structure, it is difficult to put Its architecture fascia dropped my own redesign; Further most importantly, it may in some cases money.
In fact, writing this article really struggled a bit, because it is really like the industry with the text orz. Or the first part of the authorized Laijiangjiang: fascia Ext Core is the heart of Ext JS, jQuery DOM manipulation to provide similar functions, are free and use the MIT License; analogy: Ext Core's in Ext JS, jQuery like it in jQuery UI. While Ext JS also be open source, but its mandate is more complicated. If open source is used to develop, apply GPLv3; if it is for commercial purposes and the source as the company proprietary, fascia apply Sencha Commercial License; if it is put it into another commercial SDK (eg Ext.NET), Sencha also provide OEM License. Today talk about Sencha Architect, is introduced fascia Sencha architecture fascia design tool, a magnesium asking $ 399, but offers a free trial. Be the first to start using Sencha Architect of an Ext JS UI
Entered, a few days ago released the latest Sencha Sencha Architect 2 (Terrier fascia in this, because it was previously called Ext Designer, upgrade now changed Architect XD). It is a powerful thing, just pull it, pull a pull, ten minutes you can put a good UI moment. In addition to pull UI, it will be renamed the reason Architect, because it can write directly on the inside code, do event handling, and even the definition of MVC architecture. (Another big selling point is the development of Sencha Touch as a mobile phone App, but this week the theme is Web App, so I will not mention this XD) will not be covered in this article to the architecture section too, the goal first set in the Quick Start and will be moving to make a Web UI. Man of few words said, let's get started (shame)
In the following figure, for example, I put a west Tree Panel, it's collapsible (retractable) and split (edge dividing line) attribute to true; the middle is put a tab that contains three of the Tab Panel. In the first Tab, I put it in the layout is set to absolute, which will appear on the screen when the grid lines to facilitate our direct drag to adjust the position of the sub-components. fascia To paste a form field to the right, anchor property can be set to 100%.
Sencha Architect big advantage is that it integrates itself Ext's documentation, significantly reducing design time turn file suffering. fascia The following diagram, fascia in the toolbox on the left midpoint of each element, there will be briefly described below; in addition, in the properties window next to each property has a question mark, move the mouse up will show off a brief description. If want to see the complete document, you can jump directly to the line connecting the point API to see. "Sencha Architect's built-in documentation fascia features" look very powerful API documentation online now!
If I want to user after pressing button on the left tree close up, how to do? (Examples sucks please bear XD) First we first tree panel on the left to take an ID called myTreePanel. Once you have ID, you can use anywhere Ext.getCmp ('element ID') to obtain the components and operation. fascia (By the way, of course, this is not the only way. If familiar with CSS selector, jQuery can also use a similar method to obtain components, such as query, up, down, etc. This wording is quite suitable controller fascia to use.)
In the enterprise web application, the information coming from the front end of the back-end fascia needs of most DB. As long as there is "eat data" elements are required to designate a store to it, inside there are all the information required for the front screen. Should be defined in a store inside the store needed to access fields (fields fascia directly in the store's property is defined fields, you can also specify a defined fascia Data Model to it.). In combo box (drop down menu), for example, it usually takes two fields: display text with the actual fascia value.
In accordance with the way of communication with the back-end, Ext offers a variety of proxy for store use. Also, according to the information of the different forms of return, but also provides a different reader for proxy use. Like I should be the most common fascia Ajax Proxy with Json Reader. For example, if we have to do a sex menu, and the information from the back-end fascia of a URL back pass Json format is as follows: {"total": 2, "data": [{"gender": "M", " genderText ":" male "}, {" gender ":" F "," genderText ":" female "}]}
Just saw Sencha Architect picture, certainly will want to try it now deploy preview button in the end is in Zuosa. In fact, nothing is to help us deploy the web server and then open the browser preview. Must first set the path in the settings as shown below. Another proposal would change the Ext JS Path 4.1 http://extjs.cachefly.net/ext-4.1.0-gpl/. "Project setting screen" Application and MVC architecture, although this is beyond the topic covered in this article, but still a little talk about the good. When large-scale Web App to a certain extent, would have been to start thinking about how to organize the code, it becomes high readability, as well as convenient maintain, dynamic fascia loading and performance issues, etc. architecture faces. If the text has introduced seen backbone.js, require.js, knockout.js other tools should be now be aware of the concept fascia of popular architecture. In fact, Ext JS also has its own mechanism similar to AMD; if you do a similar backbone of hash routing, you can through Ext.history (but it is embarrassing to be with a hidden iframe support older browsers can not); and most importantly, it's MVC architecture design is quite good, worth a special article to open another fascia in-depth discussion. To find out, you can refer to this official introduction. After reading it, I believe it will not wait dragged from the toolbox on the left controller to play out! Good text Share Ext JS Application 4 in / MVC architecture overview Deft JS: Loosely Coupled MVC through Dependency Injection - John Yanarella following several related articles archticture tool is also well worth a look, but it does not matter with Ext Backbone.js X RequireJS Quick Guide - Osawa introduction of small iron wood Knockout.js MVVM: Understanding MVVM - A Guide For JavaScript Developers - Addy Osmani integrate back-end development in the understanding of the behavior of his remit after, you will find is very easy with the back-end development project integration. fascia One problem encountered is the path he ran AMD JS Class dynamically loaded when the project is now in the directory structure is the same, this time we should attribute to Ext.application the appFolder make adjustments. My last article is an example of Java EE Web project, Eclipse fascia will Ext Designer 1.2 integrated development. Impression was the main technology stack is roughly (pure memories, for reference): front end to communicate with REST (JAX-RS); Servlet and JAVA part is to do DI Spring and AOP; ORM using JPA 2; local test environment use run-jetty-run. Good text Share Node.js + mongodb + EditGrid paradigm IE8 performance issues
Ext JS 4 features a brand new rendering pipeline that is significantly more structured and extensible than the rendering process in Ext JS 3. All Components now render the same way, and are driven by XTemplates. They also follow a common hook point regime, enabling the framework and developers to extend or hook into the render process for each Component.
While the new rendering architecture is a big step forward, it did create slow performance in some cases. fascia In 4.0.1 and before the order of operations in the rendering process was not as efficient as it could have been, resulting in many more DOM updates than are actually needed. In 4.0.2 we have corrected this behavior, yielding significant render speed improvements.
We have already identified further optimizations to the rendering pipeline that will be incorporated into Ext JS 4.0.3 and beyond. Performance is very important to all of us and making the framework as fast as we know it can be will remain a top priority for the team.
All topics Hadoop AWS mobile games Java Android iOS Swift intelligent hardware Docker OpenStack VPN Spark ERP IE10 Eclipse CRM JavaScript database Ubuntu NFC WAP jQuery BI HTML5 Spring Apache .NET API HTML SDK IIS Fedora XML LBS Unit