GXT Paging Toolbar Disabled

The paging toolbar keep disabled when it loads data and a new request is made before the last request accomplished. My temporary solution is to use flag to avoid request the same data several time concurrently. But what about, the data is different ????

Finally I found the solution after read the post in GXT forum. You can find it here.
http://www.sencha.com/forum/showthread.php?85011-Loading-Store-twice-causes-PagingToolBar-to-disable

But in my solution, I just use override the loader LoadListener events. The concept is to disable paging toolbar on data load and enable it on load completed.

Code:
grid.getStore().getLoader().addLoadListener(new LoadListener() {

@Override
public void loaderBeforeLoad(LoadEvent le) {
getPanel().getBottomComponent().setEnabled(false);
}

@Override
public void loaderLoad(LoadEvent le) {
getPanel().getBottomComponent().setEnabled(true);
super.loaderLoad(le);
}
});

Hope this code is useful to you too.

GXT JsonReader without model type fields

In GXT, to convert JSON to ModelData we need to declare the model type fields for each variable to be converted into model data. As the data changed, you need to change the model type fields or you will get the null pointer exception. So I want to create a JSON reader that can read json string and convert to model data without need specify the fields.

To do that I need to create a custom JsonReader, JsonPagingLoadResultReader and JsonLoadResultReader.

They can be downloaded here :

MyJsonReader.java
MyJsonPagingLoadResultReader.java
MyJsonLoadResultReader.java

Change background color in GXT grid column

column.setRenderer(new GridCellRenderer() {
    public String render(Stock model, String property, ColumnData config, int rowIndex,
        int colIndex, ListStore store) {
      config.style = "background-color: silver;";
      return model.get(property);
    }
  });


Source:http://www.sencha.com/forum/showthread.php?49510-Change-background-color-in-GXT-grid-column

Apache Compression

Actually, when I worked out with GWT Code Splitting, I still not satisfied with the result.
I know the web browser support content compression so a gave it a look.I chose to use the most simple solution, Apache compression. I just need to set .htaccess configuration and copy to your web folder.

Steps :

1. Enable Apache mod_deflate. mod_gzip is better but I don't have the extension. Open Apache configuration file and turn on the settings.

LoadModule deflate_module modules/mod_deflate.so

2. Create .htaccess file and paste these configuration. I want to compress all files with js, css, html, htm and php extensions.

<FilesMatch "(?i)^.*\.(js|css|html|htm|php)$">
SetOutputFilter DEFLATE
</FilesMatch>

3. Restart Apache. Done.

Try to open your web and use firebug to see your file downloads.
I was successfully, reduce the file download from 600Kb (After GWT code splitting) to 250Kb. So the total I saved around 800Kb and speed up my system.

GWT Code Splitting

In my GWT + GXT project, the obfuscated javascript output file is around 1.1MB. It takes quite long for the browser to load all the files before the system is running. So I gave a look on GWT code splitting.

It's very simple and just need to implement

1. GWT.runAsync(new RunAsyncCallback() {}
2. Set GWT compiler parameter : -compileReport. Make sure you disable draft compile mode since it will not produce the SOYC(Story of your compile)
   

You can see the compile report as you know what is going to be downloaded on initial download, full download and leftover.

http://code.google.com/webtoolkit/doc/latest/DevGuideCodeSplitting.html
http://code.google.com/webtoolkit/doc/latest/DevGuideCompileReport.html

Soon I will try to reduce the usage of the GXT library which is the most codes included in my initial download.

HTML Doc PHP Implementation

I want to use PDF in my project to print the report. Currently my report is in HTML format since it is easy to generate using PHP. Before this, I have try to use DOMPDF and TCPDF, but unfortunately, there is a lot of customization need to be done to get a good PDF report.
Finally, I found HTMLDoc. It's open source but to get the compiled-ready binary you need to buy.
Fortunately. I found the free compiled binary here :

http://htmldoc-binaries.org/

Download and install HTMLDoc.

 public function topdf($filename, $options = "") {

      $path = "library_includes/general/htmldoc/htmldoc.exe";
      $path=realpath($path);
      # Tell HTMLDOC not to run in CGI mode...
      putenv("HTMLDOC_NOCGI=1");

      $scmd = "$path -t pdf --quiet --landscape --jpeg --webpage --header ... $options $filename";
      # Write the content type to the client...
      header("Content-Type: application/pdf");
      flush();
      system($scmd);
  }

Just submit your URL / file name and the HTMdoc will will create the PDF on the fly.
For more details about the command line, you can refer be to the document :

http://www.easysw.com/htmldoc/docfiles/8-cmdref.html

But, if your url is password protected using login and session, you need to handle to bypass the session checking since HTMLDoc read the url and PHP will treat HTMLDoc as new session rather than your current.

GXT Paging Grid With Remote Search

I'm using paging grid in GXT to view a list.
The basic is shown below:

ScriptTagProxy<PagingLoadResult<ModelData>> proxy = new ScriptTagProxy<PagingLoadResult<ModelData>>(url);
JsonPagingLoadResultReader<PagingLoadResult<ModelData>> reader = new JsonPagingLoadResultReader<PagingLoadResult<ModelData>>(type);
final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, reader);
loader.setRemoteSort(true);
final ListStore<ModelData> mystore = new ListStore<ModelData>(loader);
return mystore;

But I want to use the same paging component for remote search. Finally I came out with this solution.

private void searchStaff() {
 String url = "index.php?option=com_model&model={0}&action=getStaffList";
 PagingLoadConfig config = new BasePagingLoadConfig();
 config.setOffset(0);
 config.setLimit(50);

 BasePagingLoader loader = ((BasePagingLoader) store.getLoader());
 ScriptTagProxy proxy = (ScriptTagProxy) loader.getProxy();
 if (keyword.getValue() == null || keyword.getValue().equals("")) {
 } else {
     url += "&keyword=" + keyword.getValue().toString();
 }
 url = url.replace("{0}", "Staff");
 url = DataUtils.formatURL(url);
 url = url.replaceAll("kpiwebgwt", "kpiweb");
 proxy.setUrl(url);
 store.getLoader().load(config);
}