Wednesday, November 7, 2012

RockMongo: MongoDB Client on Mac OSX Lion

On Mac OSX Lion, I use MongoHub as the client tool to view and display my mongodb. MongoHub has native UI for Mac, and provided functionalities for most of my operations. However MongoHub is a little bit buggy and sometimes crashes. On my apache server, I use RockMongo, an excellent Mongo administrator site to manage my mongodb. Here is some steps for me to lunch RockMongo on my Mac OSX Lion(10.7). It runs perfectly!

  1. Apache2 and PHP5 has already been installed on Mac OSX. You just need to enable it.
    • Enable Apache2:   
    install apache2 on mac osx
    • PHP is disabled on apache2 by default, you need to enable it manually: open apache2 config file with command "sudo vi /etc/apache2/httpd.conf", find the line "LoadModule php5_module libexec/apache2/" and remove the "#" at the beginning to enable php5 module.
  2. Install mongo php driver
    • You may need to firstly install the php tool "pecl"
      • cd /usr/lib/php
      • sudo php install-pear-nozlib.phar
      • Edit/etc/php.ini and find the line: ;include_path = ".:/php/includes" and change it to:
        include_path = ".:/usr/lib/php/pear"
      • sudo pear channel-update
      • sudo pecl channel-update
      • sudo pear upgrade-all
    • Then run command "sudo pecl install mongo". Make sure you xcode has been installed correctly. pecl will download mongo php driver source code and build it. (The precompiled may not work on your machine. So you have to use pecl to install the driver.)
    • run command sudo vi /etc/php.ini to open php.ini for editing, if you /etc/php.ini does not exist, copy /etc/php.ini.default to /etc/php.ini, add ""
  3. Download RockMongo source code, and copy to your "computer website folder"
  4. You need to run "sudo apachectl restart" to restart apache2 server.
  5. Login to http://localhost/rockmongo, with user/password as "admin/admin". Then you should see  RockMongo as follows:

Saturday, November 3, 2012

Grid to Excel export plugin for ExtJS 4

ExtJS has an excellent component Grid Panel to display well structured data. The Grid component may be able to fulfill customer's requirements in most of the cases, but once customer need to do customized calculation on the grid, the may need to export the grid data to their favorite tool, for example, Microsoft Excel, for further process.

With some investigation on internet, this requirement actually existed for a long time, there are 2 main thread on sencha forum:
The discussions have been there for 3 years, but neither of the works well so far, either because of compatibility issues on Ext.JS 4 or bugs in them. I'm not going to discuss more about details, but summarized the 3 ways:
  1. Leverage document data location: set document URL to BASE64 encoded data like: data:application/;base64,... 
    • Pros: pure JavaScript side, no dependency on any 3rd party tools or objects.
    • Cons: the download file cannot be customized, and there are some limitations on encoding UTF-8 to BASE64
  2. Send request to server and generate data stream with specified file format on server.
    • Pros: still pure JavaScript on client side, and developer can choose the file name.
    • Cons: need some work on server side, the code here made it works on JSP.
  3. Use flash Downloadify to generate a file on the fly.
    • Pros: No server side work, user can choose the file name just like a normal download.
    • Cons: depends on flash object.
My version of Ext.ux.Exporter  actually forked the version who use Downloadify, and fixed some defects to make it works on ExtJS 4.1.1a. Here is the code to use it:

  • include script files in html file:
<script type="text/javascript" src="/extjs/src/ux/exporter/swfobject.js"></script>
<script type="text/javascript" src="/extjs/src/ux/exporter/downloadify.min.js"></script>
  • in docedItems list of grid panel, generally on a toolbar, add an item as follows::
    xtype: 'exporterbutton'
In my implementation, I didn't take time to resolve the excel format issue, instead I use CSV format as default format. What I need is not to keep the exact style when load. I need further processing on data, and a CSV file can fulfill my requirements perfectly.