Posts In "Extjs"

ExtJS: Simple File Browser

June 1st, 2011 by aditia rahman / 18 Comments  


ExtJS has a lot of great components to build complete web application that can be look like desktop application, In today post I want to show how to create a very simple file browser in ExtJS, with PHP backend we can easily get file and folder on the system.

ExtJS File Browser

First this example have some limitation, I try it on my XAMPP localhost, so I assumed the it is the top parent of all directories, the tree directory only load once when the page is loaded, file preview only in grid component.

ExtJS: Load Grid From Another Grid

May 23rd, 2011 by aditia rahman / 10 Comments  


About last week I got a question from a friend in ExtJS subject, like this pst title said he asking how to load a grid from another grid, which mean the first grid loaded when the page load, and the second grid loads when a row in the first grid clicked.

Extjs load grid from other grid

This is really simple actually, in this example I’m using static json file as a data source, the data are the company list and the company product list, i get all this data from wikipedia.

ExtJS Displaying Default ComboBox Value

February 15th, 2011 by aditia rahman / 3 Comments  


In this sort post I want to share how to displaying default combobox value in ExtJS, I write this post because last week one of my friend asking how to do this, the condition are there is a data grid with edit button in the toolbar, when user choose one row in the grid and click the edit button, the window component with form inside it appear, to editing data.


ExtJS Thumb Viewer Using Dataview

February 11th, 2011 by aditia rahman / No Comments  


extjs thumb viewer dataview

In this post I want to create an example thumb viewer in ExtJS, if you have tried old software like gqview, you may familiar with this thumb viewer, well not really complicated actually, just love to use it when reading my favorite comic.

Google Web Seach With ExtJS Grid and PHP

January 24th, 2011 by aditia rahman / 3 Comments  


This time I want to make a simple example in displaying google web search result in ExtJS grid, other ExtJS component that can be used to displaying this result is dataview, but grid is more common in displaying data in ExtJS, to use google search API you have to signup to get an API key, one key is only for one domain.

Google API Key

Extjs DataView With Pagination

January 11th, 2011 by aditia rahman / 2 Comments  


It’s quite a long time since I write post about ExtJS, just want to add ExtJS to my post collection, this time I want to show it that the dataview component can be applied with paging toolbar, maybe you want to create a gallery that have a lot of images, and basically I using my older source about Image Gallery in ExtJS, actually not much change in the code and I only post some part of code from this example, but of course you can download the full source code or view the online demo.

Extjs: Simple User Managament Using Codeigniter

December 9th, 2010 by aditia rahman / 14 Comments  


Hello again this is another post of ExtJS, this post is to showing my little idea how to manage user permission in ExtJS component, In this post I not showing the full source code, just a little part of the code to get the idea how it works, however the complete source code still available on the download link at the end of this post.

This example is a simple user management that user can manipulate other user data and users groups, user need to logged in to the system to do some action, and the feature are:

- Add, Update, Delete Users
- Add, Update, Delete Groups
- Administrator cannot be deleted or updated

Which mean it will take different action button in the application screen, depend on the users groups, what is not handled in this example is user restriction, if a group have granted to modify certain user, it can modify whole user although it is the administrator.

The image is the file structure that I have created on this example, there will be a form and two grid panel in this application, a usual login form with label and textfield, a grid contain user data with the toolbar menu and a grid contain group data.

In the database we need to make a relation between user and groups and here the sql code that I created, for both groups and users table

ExtJS: Custom Right Click Menu in Dataview

October 5th, 2010 by aditia rahman / 10 Comments  


Sometimes we need to add a custom menu in mouse right click event function, and this is possible in ExtJS, why would I create this, just my though to create file explorer like using ExtJS, and what I think to list all the file that available is in Dataview, maybe this useful in the future, actually this is very simple here the part of the code.

First we create the menu that we want

var menu1 = new{
    items: [
            text: 'I like Ext',
            checked: true
        }, '-', {
            text: 'Open With',
            menu: {
                items: [{
                    text: 'Notepad ++'
                }, {
                    text: 'GIMP 2.0'
                }, {
                    text: 'Firefox'
        }, '-', {
            text: 'Cut'
        }, {
            text: 'Copy'
        }, {
            text: 'Delete'
        }, '-', {
            text: 'Rename'

Sticky Notes Using ExtJS Window and HTML5 Web SQL Database

September 30th, 2010 by aditia rahman / 4 Comments  


In this post I want to share how to creating very simple sticky notes application using HTML 5 Web SQL Database and ExtJS Windows, this post is continuation from my previous post about creating dynamic window in extjs, since this post using HTML 5 Web SQL Database, this code for now only working on Google Chrome, Apple Safari and Opera. The feature that I will create in this post are basic insert, update, delete feature.

All the sql operation written in javascript code, first initializing database

var db = openDatabase('mydb', '1.0', 'my first database',
            2 * 1024 * 1024);

db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS ' +
      'notes (id INTEGER PRIMARY KEY, notes text, '+
      'x INTERGER, y INTEGER)');

Simple Checkbox ListView Using DataView In ExtJS

September 20th, 2010 by aditia rahman / 7 Comments  


In this post I want to share how to create listview using dataview in ExtJS, although there is available listview example on the official site, somewhat maybe you to make the different listview, I get the idea when my friend Erwin Draft asking me how to do this, thanks for the idea.

Here the backend PHP code, I called get-data.php


$data = array();

for ($i = 1; $i <= 10; $i++) {
    $data[] = array(
        'id' => $i,
        'message' => 'Raw data number ' . $i

$o = array('data' => $data);

echo json_encode($o);