Navigation mit Esc, und

http://extjs-kochbuch.de/Slides - Interaktive Version der Präsentation!

![tools](images/johannes.png) ### [Johannes Hoppe](http://johanneshoppe.de)
### Enterprise-
Webanwendungen
## B2C
## B2B ## = B2C +        
## B2B
  • HTML5, CSS3
  • Responsive / Flat Design
  • Statuspersistenz der Benutzeroberfläche
  • Mehrsprachigkeit

  • Mandantenfähigkeit
  • White-Label-fähig
  • Komplexes User/Rollen-Konzept
  • Komplexe Grids, Trees und Charts
  • ...
## Beispiel: Grids ![Grid](images/grid_01_normal.png) [Demo](http://extjs-kochbuch.de/extjs/examples/build/KitchenSink/ext-theme-gray/#array-grid)
![Iceberg](images/iceberg.png)
## Grid - Charts [![Grid](images/grid_06_charts.png)](http://extjs-kochbuch.de/extjs/examples/charts/FormDashboard.html?theme=gray) [Demo](http://extjs-kochbuch.de/extjs/examples/charts/FormDashboard.html?theme=gray)
### Komplexität
### Leichtgewichtige
Frameworks
  • jQuery / Backbone.js / AngularJS / Knockout / ember
  • + Plugins
  • + CSS-Framework
        (z.B. Bootstrap)
  • + HTML5 + CSS3
        (z.B. Less, Sass)
  • + Klebstoff
        (z.B. require.js)
  • + Drittanbieter: UI Elemente
        (z.B. TinyMCE, jqGrid, jsTree...)
### Universelles
Framework
Sencha Ext JS
(das war's)
### Hello World Ext Core
# 1. ### pures Ext.Js
### Klassen ```js contenteditable Ext.define("MyNamespace.HelloWorld", { text: null, constructor: function() { this.text = "Hello!"; } }) var hello = new HelloWorld(); ```
### Vererbung ```js contenteditable Ext.define("MyNamespace.HelloWorld", { extend: "Ext.window.Window", /* ... */ }); ```
### Loader ```js contenteditable Ext.define("MyNamespace.HelloWorld", { requires: ["foo.Bar"], /* ... */ }); ```
### Hello World ```js contenteditable Ext.onReady(function () { Ext.create('Ext.window.Window', { title: 'Test', height: 200, width: 400, html: "Hello World" }).show(); }); ``` Beispiel: [HelloWorld](http://ex.extjs-kochbuch.de/#!ex/HelloWorld)
# 2. ### Ext.NET
### Hello World ```csharp contenteditable @Html.X().ResourceManager() @(Html.X().Window() .ID("Window1") .Title("Test") .Height(200) .Width(400) .Html("Hello World")) ``` Beispiel: [HelloWorldNet](http://ex.extjs-kochbuch.de/#!ex/HelloWorldNet)
### Widgets Components & Container
## Components
* Erben von Ext.AbstractComponent * Life Cylce (Initialization -> Render -> Destruction) * z.B. Button
## Container
* Erben von Components * items-Property * [layout](http://extjs-kochbuch.de/extjs/docs/#!/api/Ext.layout.container.Container)-Property * z.B Panel
### items: [] ```js contenteditable Ext.define("App.view.Viewport", { extend: "Ext.container.Viewport", layout: "border", items: [{ region: "west", xtype: "panel", title: "West", width: 150, }, { region: "center", html: "Hello, World!" }] }); ```
### Wichtige Components
* Ext.button.Button * Ext.Img * Ext.LoadMask * Ext.menu.Item * Ext.form.Label * [...]
### Wichtige Container
* Ext.panel.Panel * Ext.container.Viewport * Ext.grid.Panel * Ext.menu.Menu * Ext.form.Panel
### Examples: Copy & Paste
* [examples.ext.net](http://examples.ext.net/) * [mvc.ext.net](http://mvc.ext.net/) * [dev.sencha.com/extjs/5.0.0/examples](http://dev.sencha.com/extjs/5.0.0/examples/) * [dev.sencha.com/ext/5.0.0/examples/kitchensink](http://dev.sencha.com/ext/5.0.0/examples/kitchensink/)
### Layouts & Themes wie Container ihre Components anordnen
### Events Observer-Pattern
### Events: el.on()

```js contenteditable var myButton = Ext.create('Ext.button.Button', { text: 'Test button', renderTo: 'myDiv1' }); myButton.on('click', function(btn, e, eOpts) { console.log(btn, e, eOpts); }); ```
### Events: el.listeners

```js contenteditable var myButton = Ext.create('Ext.button.Button', { text: 'Test button', renderTo: 'myDiv2' listeners : { click: function(btn, e, eOpts) { console.log(btn, e, eOpts); } } }); ```
### Custom events

```js contenteditable var myButton = Ext.create('Ext.button.Button', { text: 'Test button', renderTo: 'myDiv3' }); myButton.addEvents('myEvent'); // optional myButton.enableBubble('myEvent'); myButton.on('myEvent', function(arg1, arg2, arg3) { alert(arg1); }); myButton.fireEvent('myEvent', "test"); ```
### Custom events

```js contenteditable var myButton = Ext.create('Ext.panel.Panel', { renderTo: 'myDiv4', items: [{ xtype: 'button', text: 'Click me', bubbleEvents: 'myEvent', listeners: { click: function() { this.fireEvent('myEvent', "test"); } } }], listeners: { myEvent: function() { alert('Child Button was pressed'); } } }); ```
### Stores
Reader Proxy Store Container (z.B. Grid)
### Architektur Cliend-side Patterns
### MVC
```js contenteditable Ext.define("App.controller.FooGrid", { extend: "Ext.app.Controller", init: function() { this.control({ "#fooGrid": { "load": this.onGridLoad } }); }, onGridLoad: function(gridCmp) { } }); ```
## MVVM #### Ext JS 5 [Doku](http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/whats_new.html)
### Lizensierung
### Ext JS * Community:  Free (GPLv3) * Commercial: per Developer/Major version
### Sencha Touch * Commercial Free
# Danke!
#### [extjs-kochbuch.de](http://extjs-kochbuch.de)

Created by Johannes Hoppe | Print PDF | Kochboch Website