<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mersoft Corporation Blog &#187; Javascript</title>
	<atom:link href="http://blog.mersoft.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.mersoft.com</link>
	<description>Achieve, Compete, and Evolve</description>
	<lastBuildDate>Tue, 25 May 2010 15:37:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>GWT-EXT: Retain Checkbox selections in page-able GridPanel</title>
		<link>http://blog.mersoft.com/2008/12/30/gwt-ext-retain-checkbox-selections-in-page-able-gridpanel/</link>
		<comments>http://blog.mersoft.com/2008/12/30/gwt-ext-retain-checkbox-selections-in-page-able-gridpanel/#comments</comments>
		<pubDate>Tue, 30 Dec 2008 17:59:24 +0000</pubDate>
		<dc:creator>Tom Bollwitt</dc:creator>
				<category><![CDATA[Java/Java Frameworks]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[GWT]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.mersoft.com/?p=179</guid>
		<description><![CDATA[When working on a sample project for Mersoft using GWT-EXT I came across a use case that required a data table that was page-able, had a checkbox selection per row, and needed to maintain the checkbox selections when paging.
Here is what I ended up doing. It may not be pretty, but hey, its a sample.
I [...]]]></description>
			<content:encoded><![CDATA[<p>When working on a sample project for <a title="Mersoft Corporation" href="http://www.mersoft.com">Mersoft</a> using <a href="http://code.google.com/p/gwt-ext/">GWT-EXT</a> I came across a use case that required a data table that was page-able, had a checkbox selection per row, and needed to maintain the checkbox selections when paging.</p>
<p>Here is what I ended up doing. It may not be pretty, but hey, its a sample.</p>
<p>I made a few updates to the CheckboxSelectionModel.js in order to properly update the checkbox in the Header row when a user manually (un)selects all the rows. This required that I comment out the CheckboxSelectionModel definition in the ext-all.js and include the CheckboxSelectionModel.js in my HTML. I updated the onMouseDown function as follows&#8230;</p>
<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; ">onMouseDown : <span style="color:#881350;">function</span>(e, t){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span>(e.button === 0 &amp;&amp; t.className == &#8216;x-grid3-row-checker&#8217;){ <span style="color:#236e25;">// Only fire if left-click<br />
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.<span style="color:#003369;">stopEvent</span>();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> row = e.<span style="color:#003369;">getTarget</span>(<span style="color:#760f15;">&#8216;.x-grid3-row&#8217;</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span>(row){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> index = row.rowIndex;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span>(<span style="color:#881350;">this</span>.<span style="color:#003369;">isSelected</span>(index)){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.<span style="color:#003369;">deselectRow</span>(index);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<span style="color:#881350;">else</span>{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.<span style="color:#003369;">selectRow</span>(index, <span style="color:#881350;">true</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#236e25;">//Get the CheckboxHeader so it can be updated.<br />
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#236e25;">//Loop through the header cells since the user may have re-ordered them&#8230;<br />
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> cbHeader = null;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> i = 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> view = <span style="color:#881350;">this</span>.grid.<span style="color:#003369;">getView</span>();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> headerCellEl = view.<span style="color:#003369;">getHeaderCell</span>(i);</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">while</span>(cbHeader == null &amp;&amp; headerCellEl != null){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span>(headerCellEl.className.<span style="color:#003369;">indexOf</span>(<span style="color:#760f15;">&#8216;x-grid3-td-checker&#8217;</span>) &gt; -<span style="color:#0000ff;">1</span>){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader = headerCellEl.firstChild;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader = Ext.<span style="color:#003369;">fly</span>(cbHeader);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headerCellEl = view.<span style="color:#003369;">getHeaderCell</span>(++i);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(cbHeader) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(<span style="color:#881350;">this</span>.grid.<span style="color:#003369;">getStore</span>().<span style="color:#003369;">getCount</span>() == <span style="color:#881350;">this</span>.selections.length) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#236e25;">//all the rows are selected, so check the header&#8230;<br />
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader.<span style="color:#003369;">addClass</span>(<span style="color:#760f15;">&#8216;x-grid3-hd-checker-on&#8217;</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <span style="color:#881350;">else</span> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#236e25;">//not all the rows are selected, so uncheck the header&#8230;<br />
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader.<span style="color:#003369;">removeClass</span>(<span style="color:#760f15;">&#8216;x-grid3-hd-checker-on&#8217;</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;},</div>
<p>I also used the code from the URL <a href="http://extjs.com/forum/showthread.php?t=45723&amp;highlight=getselectionmodel">http://extjs.com/forum/showthread.php?t=45723&amp;highlight=getselectionmodel</a>, however it too needed to be modified to update the Header checkbox.</p>
<p>I created a CheckBoxMemory.js with the following code and included it in my HTML&#8230;</p>
<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; ">Ext.<span style="color:#003369;">namespace</span>(<span style="color:#760f15;">&#8216;Ext.ux.plugins&#8217;</span>);</p>
<p>Ext.ux.plugins.CheckBoxMemory = Ext.<span style="color:#003369;">extend</span>(Object, {<br />
&nbsp;&nbsp;&nbsp;constructor : <span style="color:#881350;">function</span>(config) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(!config)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config = {};</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.prefix = <span style="color:#760f15;">&#8216;id_&#8217;</span>;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.items = {};<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.idProperty = config.idProperty || <span style="color:#760f15;">&#8216;id&#8217;</span>;<br />
&nbsp;&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;&nbsp;init : <span style="color:#881350;">function</span>(grid) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.grid = grid;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.view = grid.<span style="color:#003369;">getView</span>()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.store = null;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.sm = grid.<span style="color:#003369;">getSelectionModel</span>();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.sm.<span style="color:#003369;">on</span>(<span style="color:#760f15;">&#8216;rowselect&#8217;</span>, <span style="color:#881350;">this</span>.onSelect, <span style="color:#881350;">this</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.sm.<span style="color:#003369;">on</span>(<span style="color:#760f15;">&#8216;rowdeselect&#8217;</span>, <span style="color:#881350;">this</span>.onDeselect, <span style="color:#881350;">this</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.view.<span style="color:#003369;">on</span>(<span style="color:#760f15;">&#8216;refresh&#8217;</span>, <span style="color:#881350;">this</span>.reConfigure, <span style="color:#881350;">this</span>);<br />
&nbsp;&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;&nbsp;reConfigure : <span style="color:#881350;">function</span>() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.store = <span style="color:#881350;">this</span>.grid.<span style="color:#003369;">getStore</span>();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.store.<span style="color:#003369;">on</span>(<span style="color:#760f15;">&#8216;clear&#8217;</span>, <span style="color:#881350;">this</span>.onClear, <span style="color:#881350;">this</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.store.<span style="color:#003369;">on</span>(<span style="color:#760f15;">&#8216;datachanged&#8217;</span>, <span style="color:#881350;">this</span>.restoreState, <span style="color:#881350;">this</span>);<br />
&nbsp;&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;&nbsp;onSelect : <span style="color:#881350;">function</span>(sm, idx, rec) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.items[<span style="color:#881350;">this</span>.<span style="color:#003369;">getId</span>(rec)] = <span style="color:#881350;">true</span>;<br />
&nbsp;&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;&nbsp;onDeselect : <span style="color:#881350;">function</span>(sm, idx, rec) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">delete</span> <span style="color:#881350;">this</span>.items[<span style="color:#881350;">this</span>.<span style="color:#003369;">getId</span>(rec)];<br />
&nbsp;&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;&nbsp;restoreState : <span style="color:#881350;">function</span>() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(<span style="color:#881350;">this</span>.store != null) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> i = 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> sel = [];<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.store.<span style="color:#003369;">each</span>( <span style="color:#881350;">function</span>(rec) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> id = <span style="color:#881350;">this</span>.<span style="color:#003369;">getId</span>(rec);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(<span style="color:#881350;">this</span>.items[id] === <span style="color:#881350;">true</span>)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sel.<span style="color:#003369;">push</span>(i);</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++i;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, <span style="color:#881350;">this</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(sel.length &gt; 0){</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.sm.<span style="color:#003369;">selectRows</span>(sel);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> cbHeader = null;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> j = 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> view = <span style="color:#881350;">this</span>.grid.<span style="color:#003369;">getView</span>();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> headerCellEl = view.<span style="color:#003369;">getHeaderCell</span>(j);</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">while</span><span style="color:#003369;"> </span>(cbHeader == null &amp;&amp; headerCellEl != null) {</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(headerCellEl.className.<span style="color:#003369;">indexOf</span>(<span style="color:#760f15;">&#8216;x-grid3-td-checker&#8217;</span>) &gt; -<span style="color:#0000ff;">1</span>) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader = headerCellEl.firstChild;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader = Ext.<span style="color:#003369;">fly</span>(cbHeader);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headerCellEl = view.<span style="color:#003369;">getHeaderCell</span>(++j);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(cbHeader) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">if</span><span style="color:#003369;"> </span>(<span style="color:#881350;">this</span>.store.<span style="color:#003369;">getCount</span>() == <span style="color:#881350;">this</span>.sm.selections.length) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader.<span style="color:#003369;">addClass</span>(<span style="color:#760f15;">&#8216;x-grid3-hd-checker-on&#8217;</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <span style="color:#881350;">else</span> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cbHeader.<span style="color:#003369;">removeClass</span>(<span style="color:#760f15;">&#8216;x-grid3-hd-checker-on&#8217;</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;&nbsp;onClear : <span style="color:#881350;">function</span>() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> sel = [];<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">this</span>.items = {};<br />
&nbsp;&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;&nbsp;getId : <span style="color:#881350;">function</span>(rec) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">return</span> rec.<span style="color:#003369;">get</span>(<span style="color:#881350;">this</span>.idProperty);<br />
&nbsp;&nbsp;&nbsp;}<br />
});</div>
<p>I have not had a chance to really dive in ,but you will need to make sure that your RecordDef has a FieldDef with a name of &#8220;id&#8221;, example&#8230; new StringFieldDef(&#8221;id&#8221;, 0)</p>
<p>I then created the corresponding Java class as follows.</p>
<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; "><span style="color:#881350;">package</span> com.mersoft.gwtsample.client.widgets.grid<span style="color:#683821;">;</span></p>
<p><span style="color:#881350;">import</span> com.google.gwt.core.client.JavaScriptObject<span style="color:#683821;">;</span><br />
<span style="color:#881350;">import</span> com.gwtext.client.widgets.Component<span style="color:#683821;">;</span><br />
<span style="color:#881350;">import</span> com.gwtext.client.widgets.ComponentPlugin<span style="color:#683821;">;</span></p>
<p><span style="color:#881350;">public</span> <span style="color:#881350;">class</span> CheckBoxMemoryPlugin <span style="color:#881350;">extends</span> ComponentPlugin {</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">public</span> <span style="color:#003369;">CheckBoxMemoryPlugin</span>() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsObj = <span style="color:#003369;">create</span>();<br />
&nbsp;&nbsp;&nbsp;&nbsp;}</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">protected</span> <span style="color:#881350;">native</span> JavaScriptObject <span style="color:#003369;">create</span>() <span style="color:#236e25;">/*-{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return new $wnd.Ext.ux.plugins.CheckBoxMemory();<br />
&nbsp;&nbsp;&nbsp;&nbsp;}-*/</span>;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;@Override<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">public</span> <span style="color:#881350;">void</span> <span style="color:#003369;">init</span>(<span style="color:#440088;">Component</span> component) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
}
</div>
<p>Then you just need to add the CheckBoxMemoryPlugin to the GridPanel. (This assumes that you already have set up a Local Paging Checkbox Grid Panel)</p>
<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; ">grid.<span style="color:#003369;">addPlugin</span>(<span style="color:#881350;">new</span> <span style="color:#003369;">CheckBoxMemoryPlugin</span>());</div>
<p>Anyway, I hope this helps someone else who may be looking to solve this.</p>
<p>I still need to update the code in order to be able to get the selected row IDs, but that is for another day.</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fblog.mersoft.com%2F2008%2F12%2F30%2Fgwt-ext-retain-checkbox-selections-in-page-able-gridpanel%2F&amp;linkname=GWT-EXT%3A%20Retain%20Checkbox%20selections%20in%20page-able%20GridPanel"><img src="http://blog.mersoft.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://blog.mersoft.com/2008/12/30/gwt-ext-retain-checkbox-selections-in-page-able-gridpanel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>My Experience with Google AJAX toolkit</title>
		<link>http://blog.mersoft.com/2008/11/12/my-experience-with-google-ajax-toolkit/</link>
		<comments>http://blog.mersoft.com/2008/11/12/my-experience-with-google-ajax-toolkit/#comments</comments>
		<pubDate>Wed, 12 Nov 2008 16:01:52 +0000</pubDate>
		<dc:creator>Mandi Zinn</dc:creator>
				<category><![CDATA[Java/Java Frameworks]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[google web toolkit]]></category>
		<category><![CDATA[Goolge Web Toolkit]]></category>
		<category><![CDATA[GWT]]></category>
		<category><![CDATA[interface builder]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Struts]]></category>
		<category><![CDATA[Tibco]]></category>

		<guid isPermaLink="false">http://blog.mersoft.com/?p=126</guid>
		<description><![CDATA[ 
 
 
My first task at Mersoft was to develop an ajax-rich web interface with a Java backend. I was told that it must be tabbed and was shown the existing interface which pretty much was just a file upload. The project was to keep the file upload plus have several tabs containing different types of reports [...]]]></description>
			<content:encoded><![CDATA[<p> </p>
<div id="attachment_130" class="wp-caption alignleft" style="width: 280px"><a href="http://blog.mersoft.com/wp-content/uploads/2008/11/gwt_blog.jpg"><img class="size-medium wp-image-130 " title="gwt_blog" src="http://blog.mersoft.com/wp-content/uploads/2008/11/gwt_blog.jpg" alt="Google Web Toolkit" width="270" height="253" /></a><p class="wp-caption-text">Google Web Toolkit</p></div>
<p> </p>
<p> </p>
<p>My first task at <a href="http://www.mersoft.com" target="_blank">Mersoft</a> was to develop an ajax-rich web interface with a Java backend. I was told that it must be tabbed and was shown the existing interface which pretty much was just a file upload. The project was to keep the file upload plus have several tabs containing different types of reports generated from the file upload.</p>
<p>I was originally directed to Tibco&#8217;s GI. The GI has it&#8217;s own &#8220;Interface Builder&#8221; used to build the gui. Creating tabs using the builder was easy, but it looked like the only way the interface could talk to a server was through a web service. Also, I didn&#8217;t see anything that would allow me to do a file upload. I started looking at the source code, and it appeared difficult to customize and/or expand.</p>
<p>After doing some searching, I came across <a href="http://code.google.com/webtoolkit/gettingstarted.html" target="_blank">Google&#8217;s Web Toolkit</a> (GWT). This uses Java code to build the interface and gets compiled to html and javascript. This even works with Eclipse. GWT was able to handle file uploading (although due to security issues, this had to be done with a form submit). I have been able to find lots of plugins, plus it has been very easy to expand most plugins and it seems easy to create my own plugin for GWT. Also, although I haven&#8217;t done this personally, it looks like it&#8217;s easy to integrate with a Javascript library, if the need ever arises. I was also able to integrate it with Struts 2.</p>
<p>I have looked at several other toolkits. Most of them required a lot of Javascript, even with the use of the toolkit. For me (a <a href="http://www.mersoft.com" target="_blank">Java programmer</a>), it is much easier writing code in Java than in Javascript. After reviewing the other frameworks and working with projects that do not use GWT, I highly recommend GWT and look forward to using it on future projects.</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fblog.mersoft.com%2F2008%2F11%2F12%2Fmy-experience-with-google-ajax-toolkit%2F&amp;linkname=My%20Experience%20with%20Google%20AJAX%20toolkit"><img src="http://blog.mersoft.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://blog.mersoft.com/2008/11/12/my-experience-with-google-ajax-toolkit/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
