tag:blogger.com,1999:blog-11413966425231578652024-03-07T20:29:29.587-08:00My ExtjsGreghttp://www.blogger.com/profile/05748216767242798986noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-1141396642523157865.post-37808647018511314202011-11-17T02:26:00.001-08:002011-11-20T11:38:16.666-08:00Resize window , resize grid<div dir="ltr" style="text-align: left;" trbidi="on">
<h1>
Preface</h1>
I had a task to resize Ext js grid, after the main window was resized.
After investigating this topic , I find how to do it and I want to share it with you.
<br />
<h1>
Implementation</h1>
The secret of this task is to use ExtJs class "EventManager".
This class is responsible for registering events in ExtJ library. So in order to do it , first of all we need to subscribe to window resize event.<br />
To do it we need to define a delegate to to onWindowResize event<br />
Ext.EventManager.onWindowResize<br />
<br />
Afterwords we can just calculate width and height of grid and to assign it .<br />
See example below<br />
<br />
<br />
Ext.EventManager.onWindowResize(function () {<br />
<br />
var tmpHeight = Ext.getBody().getViewSize().height - 160;<br />
var height = Ext.getBody().getViewSize().height - 140;<br />
<br />
grid.setSize(width, height);<br />
<br />
});<br />
<h1>
Summary</h1>
So we learned how to change the grid size and height. Please see other
useful links:<br />
<div style="text-align: left;">
1. <a href="http://gregnozik.blogspot.com/2011/09/remove-mask-from-grid-extjs.html">Remove Loading message</a><br />
2. <a href="http://gregnozik.blogspot.com/2011/09/extjs-sgif.html">Optimize page</a></div>
</div>Greghttp://www.blogger.com/profile/05748216767242798986noreply@blogger.com0tag:blogger.com,1999:blog-1141396642523157865.post-80917594457404483102011-11-13T08:38:00.001-08:002011-11-13T09:41:03.450-08:00EXTJS Object Oriented Design<div dir="ltr" style="text-align: left;" trbidi="on">
<h1>
Preface</h1>
One of the main goal of ExtJs framework is to build scalable applications. In order to do it effectively ExtJS enables to create,inherit classes and define namespaces. In this article we will see how to use these features in your programming design. <br />
<h1>
Namespace</h1>
When developing complicated projects,when defining the same functions or variable in various files, problems begins. In order to avoid it , ExtJs suggest to use namespaces. In order to use it,use following syntax <i>Ext.ns("Customization");</i> The example of namespaces I will show you in class section <br />
<h1>
Classes</h1>
In order to create a class Extjs exposes<i> Ext.define </i>method. See example below <br />
<br />
<br />
Ext.ns("StockNs");<br />
Ext.define('StockNs.Instrument', {<br />
name: 'Unknown',<br />
<br />
constructor: function (name) {<br />
if (name) {<br />
this.name = name;<br />
}<br />
return this;<br />
},<br />
<br />
calc: function () {<br />
alert('base calc');<br />
return this;<br />
}<br />
});<br />
<br />
As you see first we defined a namespace. Which called "StockNs". Afterwords we created<br />
a class called Instrument. The constructor function called when class is created.<br />
The class has one property named "name".<br />
<br />
<h1>
Inheritance</h1>
In order to implement inheritance, we need to use "extend" key word. See example below <br />
<br />
<br />
Ext.define('StockNs.Stock', {<br />
extend: 'StockNs.Instrument',<br />
<br />
calc: function () {<br />
alert('stock calc');<br />
this.superclass.calc();<br />
}<br />
<br />
});<br />
<br />
var stock = Ext.create('StockNs.Stock', 'YAHOO');<br />
stock.calc();<br />
<br />
We defined class Stock that inherited from Instrument class. Please notice that Stock class have the<br />
same "Calc" method as the base class. In implementation of this function , we invoke the base "Calc"<br />
method. We created Stock class and called to Calc method. If you will write it , you will see that<br />
the method by default is overridden.<br />
<br />
<h1>
Summary</h1>
In this article we looked at the basic of EXTJs object oriented design. </div>Greghttp://www.blogger.com/profile/05748216767242798986noreply@blogger.com0