جلسه چهارم آموزش Extjs 6 شرکت مهندسی آرماندار حسین جهانبخش http://armandar.com

1. ‫آموزش‬ ‫چهارم‬ ‫جلسه‬EXTJS
‫جهانبخش‬ ‫حسین‬
‫سینا‬ ‫آرماندار‬ ‫رهپویان‬ ‫مهندسی‬ ‫شرکت‬
http://armandar.com
http://armandar.com

2. ‫های‬ ‫کالس‬EXT JS
 Ext
 Ext.Base
 Ext.Class
 Ext.ClassManager
 Ext.Loader
http://armandar.com

3. Ext
 application
 define
 Create
 onReady
 Widget
 getClass
 getClassName
http://armandar.com

4. Ext.application
Ext.application({
name: 'MyApp',
extend:'MyApp.Application',
launch: function() {
}
})
http://armandar.com

5. 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

6. Ext.define extending, overriding and sibleton
Ext.define('ElectricCar', {
extend: 'Car',
start: function() {
alert("Electric car started");
}
});
http://armandar.com
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);
}
});

7. Ext.create
Ext.create(Class,Options);
http://armandar.com
var myCar = Ext.create('ElectricCar',{
name: 'MyElectricCar‘
});
var myCar = new ElectricCar('MyElectricCar');
Ext.Loader

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

9. Ext.widget
alias: ‘widget.highchart’
‫یا‬
xtype: ‘highchart’
http://armandar.com
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‘
});
}
})

10. Ext.getClass
var button = new Ext.Button();
Ext.getClass(button); // returns Ext.Button
http://armandar.com

11. Ext.getClassName
Ext.getClassName(Ext.Button); //returns "Ext.Button"
http://armandar.com

12. Ext.Base
‫ای‬‫پایه‬ ‫کالس‬Ext Js‫در‬ ‫موجود‬ ‫های‬ ‫کالس‬ ‫تمام‬ ‫که‬Ext‫کند‬‫می‬ ‫بری‬‫ارث‬ ‫آن‬ ‫از‬.
‫دسترس‬ ‫در‬ ‫دیگر‬ ‫ها‬‫کالس‬ ‫تماس‬ ‫در‬ ‫کالس‬ ‫این‬ ‫فیلدهای‬ ‫و‬ ‫خصوصیات‬ ‫متدها‬ ‫تمام‬
‫است‬.
http://armandar.com

13. Ext.Class
‫توسط‬ ‫که‬ ‫است‬ ‫ای‬‫پایه‬ ‫کالس‬Ext.ClassManager‫استفاده‬ ‫کالس‬ ‫یک‬ ‫ایجاد‬ ‫برای‬
‫شود‬‫می‬.‫از‬ ‫آن‬ ‫جای‬ ‫به‬ ‫و‬ ‫نکنید‬ ‫استفاده‬ ‫آن‬ ‫از‬ ‫مستقیم‬ ‫طور‬ ‫به‬ ‫بنابراین‬
Ext.define‫کنید‬ ‫استفاده‬.
http://armandar.com

14. Ext.ClassManage
 Ext.define
 Ext.create
 Ext.widget
 Ext.getClass
 Ext.getClassNam
http://armandar.com

15. 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  armandarviewabout.js
http://armandar.com

16. Events
Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
listeners: {
click: function() {
Ext.Msg.alert('Button clicked!');
}
}
});
http://armandar.com
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
}
})

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

18. Events
<div id="mydiv"></div>
var div = Ext.get('mydiv');
div.on('click', function(e, t, eOpts) {
// Do something
});
http://armandar.com

19. ‫صفحه‬ ‫عناصر‬ ‫به‬ ‫دسترسی‬
 get
 query
 select
http://armandar.com

20. Ext.get
var mydiv = Ext.get('myDivId'); //returns a Ext.dom.Element
http://armandar.com

21. Ext.query
var someNodes = Ext.query('.oddRow',
myCustomComponent.getEl().dom
);
‫ندام‬ ‫بدا‬ ‫کامپونندت‬ ‫یدک‬ ‫کنیدد‬ ‫فرص‬myCustomComponent‫صدفحه‬ ‫در‬
‫عنصدددر‬ ‫بددده‬ ‫دسترسدددی‬ ‫بدددرای‬ ‫داریددددر‬dom‫دسدددتور‬ ‫از‬ ‫آن‬
myCustomComponent.getEl().dom‫کنیم‬‫مدی‬ ‫استفاده‬.‫بده‬ ‫گرفتده‬ ‫را‬‫آن‬
‫دستور‬ ‫به‬ ‫ریشه‬ ‫عنوان‬query‫تمدام‬ ‫دسدتور‬ ‫ایدن‬ ‫و‬ ‫کنیم‬‫مدی‬ ‫ارسال‬
‫کالس‬ ‫که‬ ‫عنصر‬ ‫این‬ ‫فرزندهای‬oddRow‫برخواهندد‬ ‫مدا‬ ‫بده‬ ‫را‬ ‫دارندد‬
‫گرداند‬.
http://armandar.com

22. Ext.select
var rows = Ext.select('div.row'); //Matches all divs with class row (a CompositeElement )
rows.setWidth(100); // All elements become 100 width
Ext.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

23. 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]');
http://armandar.com
• nextNode
• up
• down
• previousSibling

24. Component
‫ییبدل‬ ‫و‬ ‫دکمده‬ ‫از‬ ‫دهید‬‫می‬ ‫قرار‬ ‫صفحه‬ ‫روی‬ ‫بر‬ ‫شما‬ ‫که‬ ‫چیزهایی‬ ‫همه‬
‫همگی‬ ‫درخت‬ ‫و‬ ‫گرید‬ ‫مثل‬ ‫تر‬‫پیچیده‬ ‫عناصر‬ ‫تا‬Component‫هستند‬.‫هدر‬
‫یک‬ ‫کامپوننت‬xtype‫از‬ ‫نخواهیدد‬ ‫کده‬ ‫زمدانی‬ ‫که‬ ‫دارد‬Ext.create‫یدا‬
Ext,define‫را‬ ‫کامپونندت‬ ‫یدک‬ ‫بخواهید‬ ‫اجرا‬ ‫زمان‬ ‫در‬ ‫و‬ ‫کنید‬ ‫اسفاده‬
‫از‬ ‫توانید‬‫می‬ ‫کنید‬ ‫ایجاد‬xtype‫نمایید‬ ‫استفاده‬.
http://armandar.com

25. Containers
 Ext.toolbar.Toolbar
 Ext.panel.Panel Ext.container.Container
 Ext.Editor
Ext.button.Button
http://armandar.com

26. 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,
}]
});
http://armandar.com
‫افددزار‬‫نرم‬ ‫هددر‬
Extjs‫ای‬‫دده‬‫مجموعد‬
‫کامپوننتهای‬ ‫از‬
‫تنیددده‬ ‫هددم‬ ‫در‬
‫است‬.

27. Layout
‫یک‬ ‫فرزندان‬ ‫به‬ ‫دهی‬‫شکل‬ ‫برای‬Container‫از‬ ‫میتوانید‬layout‫استفاده‬
‫کنید‬.
‫از‬ ‫استفاده‬ ‫با‬ ‫قیبل‬ ‫مثال‬layout‫نام‬ ‫به‬ ‫ی‬column
Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 700,
height : 400,
layout : 'column',
items: [ //‫قبل‬ ‫مثال‬ ‫مانند‬ ‫کد‬ ‫ادامه‬
http://armandar.com

28. Layout
 updateLayout
 suspendLayout
http://armandar.com

29. ‫انواع‬Layout
 absolute
 accordion
 anchor
 border
 card
 center
 column
 fit
 hbox
 table
 vbox
http://armandar.com

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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 }
]
});
http://armandar.com