http://armandar.com

EXTJSجلسه چهارم آموزش حسین جهانبخش

شرکت مهندسی رهپویان آرماندار سیناhttp://armandar.com

http://armandar.com

EXT JSکالس های

Ext Ext.Base Ext.Class Ext.ClassManager Ext.Loader

http://armandar.com

Ext

application define Create onReady Widget getClass getClassName

http://armandar.com

Ext.application

Ext.application({ name: 'MyApp', extend:'MyApp.Application', launch: function() { } })

http://armandar.com

Ext.define

Ext.define(name,data, callback)

Ext.define('Car', { name: null, constructor: function(name) { if (name) { this.name = name; } }, start: function() { alert('Car started'); } });

http://armandar.com

Ext.define extending, overriding and sibleton

Ext.define('ElectricCar', { extend: 'Car', start: function() { alert("Electric car started"); } });

Ext.define('My.ux.field.Text', { override: 'Ext.form.field.Text', setValue: function(val) { this.callParent(['In override']); return this; } });

Ext.define('Logger', { singleton: true, log: function(msg) { console.log(msg); } });

http://armandar.com

Ext.create

Ext.create(Class,Options);

var myCar = Ext.create('ElectricCar',{ name: 'MyElectricCar‘ });

var myCar = new ElectricCar('MyElectricCar');

Ext.Loader

http://armandar.com

Ext.onReady

Ext.onReady(function(){ new Ext.Component({ renderTo: document.body, html: 'DOM ready!‘ }); })

http://armandar.com

Ext.widget

alias: ‘widget.highchart’

یا

xtype: ‘highchart’

Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), title: 'Panel‘ }); Ext.widget('panel', { renderTo: Ext.getBody(), title: 'Panel‘ }); Ext.create('widget.panel', { renderTo: Ext.getBody(), title: 'Panel‘ });

Ext.application({ name : 'Fiddle', launch : function() { Ext.create('widget.panel', { renderTo: Ext.getBody(), title: 'Panel‘ }); } })

http://armandar.com

Ext.getClass

var button = new Ext.Button(); Ext.getClass(button); // returns Ext.Button

http://armandar.com

Ext.getClassName

Ext.getClassName(Ext.Button); //returns "Ext.Button"

http://armandar.com

Ext.Base

از آن ارث بری می کند. تمام متدها Ext که تمام کالس های موجود در Ext Jsکالس پایه ای خصوصیات و فیلدهای این کالس در تماس کالس ها دیگر در دسترس است.

http://armandar.com

Ext.Class

برای ایجاد یک کالس استفاده می شود. Ext.ClassManagerکالس پایه ای است کrه توسط استفاده کنید.Ext.defineبنابراین به طور مستقیم از آن استفاده نکنید و به جای آن از

http://armandar.com

Ext.ClassManage

Ext.define Ext.create Ext.widget Ext.getClass Ext.getClassNam

http://armandar.com

Ext.Loader

Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);

Ext.require(['widget.*', 'layout.*', 'Ext.data.*');

Ext.exclude('Ext.data.*').require('*');

Armandar.view.About \armandar\view\about.js

http://armandar.com

Events

Ext.create('Ext.Button', { renderTo: Ext.getBody(), listeners: { click: function() { Ext.Msg.alert('Button clicked!'); } } });

Ext.create('Ext.Button', { renderTo: Ext.getBody(), listeners: { mouseout: function() { //Do something }, click: function() { // Do something } } });

var button = Ext.create('Ext.Button');button.on('click', function() { //Do something });

button.on({ mouseover: function() { //Do something }, mouseover: function() { //Do something } })

http://armandar.com

Events

var HandleClick= function() { Ext.Msg.alert('My button clicked!'); }Ext.create('Ext.Button', { listeners: { click: HandleClick } });button.un('click', HandleClick)

http://armandar.com

Events

<div id="mydiv"></div>

var div = Ext.get('mydiv'); div.on('click', function(e, t, eOpts) { // Do something });

http://armandar.com

دسترسی به عناصر صفحه

get query select

http://armandar.com

Ext.get

var mydiv = Ext.get('myDivId'); //returns a Ext.dom.Element

http://armandar.com

Ext.query

var someNodes = Ext.query('.oddRow', myCustomComponent.getEl().dom);

نام بrا کامپوننrت یrک کنیrد برای myCustomComponentفرص دارید، صrفحه در عنصrر بrه دستور domدسrترسی از آrن myCustomComponent.getEl().dom

ارسrال می کنیrم و این queryاسrتفاده می کنیم. آن را گرفتrه بrه عنوان ریشrه بrه دسrتور دارند را به ما برخواهند گرداند.oddRowدستور تمام فرزندهای این عنصر که کrالس

http://armandar.com

Ext.select

var rows = Ext.select('div.row'); //Matches all divs with class row (a CompositeElement )rows.setWidth(100); // All elements become 100 widthExt.select('div.row').setWidth(100);

Ext.select('div.row, span.title'); //Matches all divs with class row and all spans with class title

Ext.get('myEl').select('div.row'); //myEl is root of searchیاExt.select('div.row', true, 'myEl');// This is equivalent to the previous line

Ext.select('div.row[title=bar]:first‘)

http://armandar.com

Ext.ComponentQuery

Ext.ComponentQuery.query('button'); // returns all the components with the xtype button

Ext.ComponentQuery.query('#foo'); //returns a component with the ID of foo

Ext.ComponentQuery.query("button[title='my button']");;یا//parent.query('textfield[title=my button]');

Ext.ComponentQuery.query('formpanel numberfield'); // Gets only the numberfields under a for

parent.child('button[itemId=save]');• nextNode• up• down• previousSibli

ng

http://armandar.com

Component

همrه چیزهایrی کrه شمrا بر روی صrفحه قرار می دهیrد از دکمrه و لیبrل تrا عناصrر پیچیده تر و درخrت همگrی گریrد یrک Componentمثrل کامپوننrت هrر کrه xtype هسrتند. دارد

اسrفاده کنیrد و در زمان اجرا بخواهید Ext,define یrا Ext.createزمانrی کrه نخواهیrد از استفاده نمایید.xtypeیک کامپوننت را ایجاد کنید می توانید از

http://armandar.com

Containers

Ext.toolbar.Toolbar Ext.panel.Panel Ext.container.Container Ext.Editor

Ext.button.Button

http://armandar.com

Containers

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, items: [{ xtype: 'panel', title: 'Panel 1', }, { xtype: 'panel', title: 'Panel 2', height: 200, items: [{ xtype: 'button', text: 'Click Me‘ }] }, { xtype: 'panel', title: 'Panel 3', width: 150, height: 100, }] });

نرم افزار Extjsهر از مجموعه ای هم در کامپوننتهای

تنیده است.

http://armandar.com

Layout

استفاده کنید.layout میتوانید از Containerبرای شکل دهی به فرزندان یک columnی به نام layoutمثال قیبل با استفاده از

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : 'column', items: [ //د مانند مثال قبلrادامه ک

http://armandar.com

Layout

updateLayout suspendLayout

http://armandar.com

Layoutانواع

absolute accordion anchor border card center column fit hbox table vbox

http://armandar.com

absolute layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : 'absolute', items: [ { xtype: 'panel', title: 'Panel 1', x: 12, y: 20, height: 250 }, { xtype: 'panel', title: 'Panel 2', x: 200, y: 150, height: 200 }, { xtype: 'panel', title: 'Panel 3', x: 400, y: 250, width: 150, height: 100 } ] });

http://armandar.com

accordion layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : 'accordion', items: [ { title: 'Item 1', html: 'Lorem ipsum dolor sit amet, consectetur ....‘ }, { title: 'Item 2', html: 'some content here‘ }, { title: 'Item 3', html: 'empty‘ } ] });

http://armandar.com

anchor layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : 'anchor', items: [ { title: 'Item 1', html: 'Item 1', anchor: '50%‘ }, { title: 'Item 2', html: 'Item 2', anchor: '-20 -200‘ }, { title: 'Item 3', html: 'Item 3', anchor: '-200‘ } ] });

http://armandar.com

border layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : 'border', items: [ { title: 'Item 1', html: 'Item 1', region: 'center‘ }, { title: 'Item 2', html: 'Item 2', region: 'east', width: 200 }, { title: 'Item 3', html: 'Item 3', region: 'south', height: 100 } ] });

http://armandar.com

card layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : 'card', defaultListenerScope: true, bbar: ['->', { itemId: 'btn-prev', text: 'Previous', handler: 'showPrevious', disabled: true }, { itemId: 'btn-next', text: 'Next', handler: 'showNext' } ], items: [ { index: 0, title: 'Item 1', html: 'Item 1' }, { index: 1, title: 'Item 2', html: 'Item 2' }, { index:2, title: 'Item 3', html: 'Item 3' } ], showNext: function () { this.navigate(1); }, showPrevious: function () { this.navigate(-1); }, navigate: function (incr) { …. } });

http://armandar.com

fit Layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : 'fit', bodyPadding: 20, items: [ { title: 'Item 1', html: 'Fills the container‘ } ] })

http://armandar.com

hbox layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : { type: 'hbox', pack: 'start', align: 'stretch', }, items: [ { title: 'Item 1', html: 'Item 1', flex: 1 }, { title: 'Item 2', html: 'Item 2', width: 100 }, { title: 'Item 3', html: 'Item 3', flex: 2 } ] })

http://armandar.com

table layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : { type: 'table', columns: 3, tableAttrs: { style: { width: '100%' } } }, items: [ { rowspan: 3, title: 'Item 1', html: 'Item 1' }, { title: 'Item 2', html: 'Item 2' }, { title: 'Item 3', rowspan: 2, html: 'Item 3' }, { title: 'Item 4', html: 'Item 4' }, { title: 'Item 5', html: 'Item 5' }, { title: 'Item 6', html: 'Item 6' }, { title: 'Item 7', html: 'Item 7' } ] });

http://armandar.com

vbox layout

Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), width : 700, height : 400, layout : { type: 'vbox', pack: 'start', align: 'stretch‘ }, items: [ { title: 'Item 1', html: 'Item 1', flex: 1 }, { title: 'Item 2', html: 'Item 2', height: 100 }, { title: 'Item 3', html: 'Item 3', flex: 2 } ] });