Documente Academic
Documente Profesional
Documente Cultură
Page 1
We have several projects in Magenta which have already used or plan to use Extjs. Why we chose extjs?
Page 2
Page 3
Extjs 0.09%
HTML 5 Shiv0.09% Prototip0.09% Hier Menus0.08%
Page 5
Extjs 0.09%
HTML 5 Shiv0.09% Prototip0.09% Hier Menus0.08%
Page 6
Extjs 0.09%
HTML 5 Shiv0.09% Prototip0.09% Hier Menus0.08%
Page 7
Extjs widgets
Windows looks like OS windows support dragging/resizing/closing
Page 8
Extjs widgets
Windows looks like OS windows support dragging/resizing/closing
Page 9
Extjs widgets
Perfect ajax data grid support paging/filtration/sorting
Easy to load/save data to server in different formats
Page 10
Extjs widgets
Perfect ajax data grid support paging/filtration/sorting
Easy to customize plugins/events support
Page 11
Ajax support Dom traversing Dom manipulation Event Handling Selectors OOP emulation Animation
Page 12
Page 13
Component
All widgets extends component class Provide base widget functions like
enable()/disable() show()/hide() addClass()/removeClass() update(data/html) update content area getEl() return element getId() getXType() render(target) focus()
Page 14
Containers
handle the basic behavior of containing items, namely adding, inserting and removing items Main functions
add() remove()/removeAll() insert() find()/findBy()/findById()/findByType doLayout() get(index or id)/getComponent(component or index or id)
Main prop
Items - MixedCollection of children components
Page 15
Panels
Main panel functions/prop/conf prop
load()
panel.load({ url: 'your-url.php', params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string callback: yourFunction, scope: yourObject, // optional scope for the callback discardUrl: false, nocache: false, text: 'Loading...', timeout: 30, scripts: false });
Page 16
Layouts
Layouts manages by containers there is no need to create Layouts directly The most useful are Fit, VBox, HBox, Border
Only VBox, HBox, Border layouts supports margins
Flex prop of VBox, HBox BorderLayout must have center item Table layout does not support resizing of items
Page 17
Viewport
A specialized container representing the viewable application area Automaticaly resize itself when browser is resized Example of creation
new Ext.Viewport({ layout : 'border', items : [ { height : 75, region : 'north', title : 'Does Santa live here?' }, { width : 150, region : 'west', title : 'The west region rules' }, { region : 'center', title : 'No, this region rules!' } ] });
Page 18
Main Ext static functions extend(Function superclass, Object overrides) : Function get/fly(StringId, HTMLElement) - returns element
These methods does not retrieve Components
getBody() - returns element body apply(obj, config, defaults) applyIf(obj, config, defaults) getCmp(id) returns component
Page 19
GridPanel
Store
contains grid data
GridView
Display store data
ColumnModel - is a class that models how the columns are organized, sized and displayed for the GridPanel widget.
var colModel = new Ext.grid.ColumnModel([ // 1 { sortable : true, header : 'Full Name', dataIndex : 'fullName' // 2 }, { header : 'State', dataIndex : 'state' }]);
Selection model
Define how user is able to select rows
var selModel = new Ext.grid.RowSelectionModel({ // 4 singleSelect : true })
Grid Features: sorting, paging, columns moving / hidding/ resizing Example of configuration
var grid = new Ext.grid.GridPanel({ // 5 title : 'Our first grid', renderTo : Ext.getBody(), autoHeight : true, width : 250, store : store, // 6 view : gridView, colModel : colModel, selModel : selModel });
Page 20
Stores
The main purposes of the stores classes are data storage/loading Store contains records object which contain a server data directly
Store is able to insert/update/add records
SubClasses
ArrayStore: Store + ArrayReader
plain js array can be loaded into the array store CRUD operation is going thought custom js method
DirectStore: Store + DirectProxy + JsonReader GroupingStore: store for grid rows grouping JsonStore: Store + JsonReader XmlStore: Store + XmlReader
Page 21
Page 22
Proxies
HttpProxy
CRUD operation are processed via ap config or url prop to a server
DirectProxy
CRUD operation is going thought custom js function
MemoryProxy
ctor of MemoryProxy takes data js array as argument and the class does not invoke any requests to a server
ScriptTagProxy
Provide possibility to make request to other domain Other domain server must return valid js text data
OnePagingHttpProxy
Page 23
Page 24
Events
If class should support events this class must extends Observable Observable methods
addListener (shorthand on()) removeListener (shorthand un()) addEvent() fireEvent relayEvent(eventName, targetObj) enableBubble()
Page 25
Plugins
All components support plugins customization Plugin is a plain js object with init method, after component is initialized the init() method of plugin is called Plugin can add listeners to component therefore customize behavior of the component
Page 26
Other widgets
Page 27