Getting started with ExtJS Javascript screen
library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine
11
Start using ExtJS
●Use named DIVs to identify content to
enhance
●<div id="container"><div
id="content" class="welcome"> ...
</div></div>
●
●Write Javascript to tell ExtJS what to do
–E.g. create layout with one panel
–Note prototype object-based approach to standardise JS objects and avoid
memory leaks (
●<script type="text/javascript">
Thescreen = function(){
return {
init: function(){
var layout = new Ext.BorderLayout(document.body, {
center: {
autoScroll: true,
minTabWidth: 50,
preferredTabWidth: 150,
titlebar: true
}
});
Thescreen = function(){
return {
init: function(){
var layout = new Ext.BorderLayout(document.body, {
center: {
autoScroll: true,
minTabWidth: 50,
preferredTabWidth: 150,
titlebar: true
}
});
●
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('content', {title:'ExtJS demo app'}));
layout.endUpdate();
}
}
}();
Ext.EventManager.onDocumentReady(Thescreen.init, Thescreen, true);
</script>
layout.add('center', new Ext.ContentPanel('content', {title:'ExtJS demo app'}));
layout.endUpdate();
}
}
}();
Ext.EventManager.onDocumentReady(Thescreen.init, Thescreen, true);
</script>