Azt tapasztaltam, hogy sokan csupán azért használják az ExtJS-t a JQuery könyvtárral, mert úgy gondolják, hogy azzal egyszerűbb a szelektorok használata, a CSS módosítás vagy éppen az animáció.
Pedig ezeknek mind létezik az ExtJS-es megfelelője:
DOM Basic + CSS:
Ext.select("#id, .class, div").addClass('blue');
Ext.select("input[type='text']").setStyle('background', 'red');
Effektek + Animáció:
Ext.get('id').slideOut('t', {useDisplay: true});
Ext.get('id').shift({
opacity: 0.5,
width: 20,
duration: 1.5,
easing: 'bounceOut'
});
DOM manipuláció:
Ext.getBody().createChild('<b>Bold text...<\/b>');
Ext.get('id').update('...');
Események:
$(this).css({background: 'red', color: 'blue'});
});
Ext.get('id').on('click', function () {
this.applyStyles({background: 'red', color: 'blue'});
});
Ajax hívások:
Ext.get('id').load('ajax.html');
url: 'ajax.html',
context: this,
success: function (req) {
alert(req);
}
});
Ext.Ajax.request({
url: 'ajax.html',
scope: this,
success: function (req) {
alert(req.responseText)
}
});
DOM Ready:
Ext.onReady(function () { /* ... */ });
Parse JSON:
Ext.decode('{"a":1}');
is IE:
Ext.isIE
foreach:
$.each(list, function (index, item) { /* ... */ });
Ext.each(list, function (item, index) { /* ... */ });
XY:
Ext.get('foo').getXY(); // [50, 100]
empty function:
Ext.emptyFn();
get version:
Ext.version