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.

download

ExtJS

The example container is based on window component, which have two items inside, they are treePanel and gridPanel, the gridPanel will load dynamically, trigerred when user click on of the tree node.

Ext.onReady(function() {
    store_dir = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'get_dir.php'
        }
    });

    tree_dir = Ext.create('Ext.tree.Panel', {
        title: 'Localhost Directory',
        rootVisible: false,
        store: store_dir,
        split: true,
        region: 'west',
        collapsible: true,
        floatable: false,
        width: 200,
        useArrows: true,
        listeners: {
            itemclick: {
                fn: function(view, record, item, index, event) {
                    store_file.load({
                        url: 'get_file.php?dir=' + record.data.id
                    });

                    nodeId = record.data.id;
                    htmlId = item.id;
                }
            }

        }
    });

    Ext.define('File', {
       extend: 'Ext.data.Model',
       fields: ['filename', 'filesize', 'filedate']
    });

    store_file = Ext.create('Ext.data.Store', {
        model: 'File',
        proxy: {
          type: 'ajax',
          url: 'get_file.php',
          reader: {
              type: 'json',
              root: 'files'
          }
        }
    });

    grid_file = Ext.create('Ext.grid.Panel', {
        title: 'File List',
        region: 'center',
        store: store_file,
        columns: [
            { header: 'Name', width: 170, dataIndex: 'filename' },
            { header: 'Size', width: 100, dataIndex: 'filesize' },
            { header: 'Last Modified', width: 200, dataIndex: 'filedate' }
        ],
        viewConfig: {
            stripeRows: true
        }
    });

    win = Ext.create('widget.window', {
        title: 'ExtJS Simple File Browser',
        width: 700,
        height: 400,
        layout: 'border',
        bodyStyle: 'padding: 5px;',
        items: [tree_dir, grid_file]
    });

    win.show();
});

PHP (get_dir.php)

This file is for fetching all directory on your XAMPP htdocs directory, using $_SERVER['DOCUMENT_ROOT'] variable. If you have many directory on htdocs, it will take time to load. In this php file I used a recursive function to get all the directory with all the sub directory by one call function, that’s why it will take time to load, and create a json format from it.

<?php

class MyDirectory {

    public $json = '[';

    public function get_children($dir, $child) {
        $dh = opendir($dir);
        while (($file = readdir($dh)) !== false) {
            if ($file != '.' AND $file != '..' ) {
                if (filetype($dir . $file) == 'dir') {
                    // must be checked if this folder have other subfolder
                    if ($this->count_sub_dir($dir . $file . '/') == 0) {
                        $this->json .= '{text:"'.$file.'", leaf: true, id: "'.$dir . $file.'"},';
                    } else {
                        $this->json .= '{text:"'.$file.'", id: "'.$dir . $file.'", children: [';
                        $this->get_children($dir . $file . '/', true);
                    }
                }
            }
        }
        if ($child) {
            $this->json .=  ']},';
        }
        closedir($dh);
    }

    public function count_sub_dir($dir) {
        $dh = opendir($dir);
        $countdir = 0;
        while (($file = readdir($dh)) !== false) {
            if ($file != '.' AND $file != '..' ) {
                if (filetype($dir . $file) == 'dir') {
                    $countdir++;
                }
            }
        }
        closedir($dh);
        return $countdir;
    }
}

$host_dir = $_SERVER['DOCUMENT_ROOT']."/";

$dir = new MyDirectory();

$dir->get_children($host_dir, false);

$dir->json .= ']';
$dir->json = str_replace(",]", "]", $dir->json);

echo($dir->json);

?>

PHP (get_file.php)

And this is the last file to get all the file (without any directory) in specific directory, the parameter sent from ExtJS tree node, when it clicked.

<?php

$dir = $_GET['dir'] . "/";

$dh = opendir($dir);
$files = array();
while (($file = readdir($dh)) !== false) {
    if ($file != '.' AND $file != '..' ) {
        if (filetype($dir . $file) == 'file') {
            $files[] = array(
                'filename' => $file,
                'filesize' => filesize($dir . $file). ' bytes',
                'filedate' => date("F d Y H:i:s", filemtime($dir . $file))
            );
        }
    }
}
closedir($dh);

echo(json_encode(array('files' => $files)));

?>

Well that all hope can give some idea to create much larger application or adding some more feature like icons view (using DataView component), create, edit, delete file, etc.

download

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.

view demo | download source

First let define the data by creating two json file, I named company.json and products.json, these two data connected by company_id property that defined in products.json. Here the code look a like.

Company.json

{'companies': [{
    'id': '1',
    'name': 'Google',
    'founded': 'September 4, 1998',
    'people': 'Sergey Brin, Larry Page'
}, {
    'id': '2',
    'name': 'Microsoft',
    'founded': 'April 4, 1975',
    'people': 'Bill Gates, Paul Allen'
}, {
    'id': '3',
    'name': 'Yahoo',
    'founded': 'March 1, 1995',
    'people': 'Jerry Yang, David Filo'
}
]}

Products.js

{'products': [{
    'company_id': '1',
    'name': 'Google Analytics',
    'type': 'Web Statistics'
}, {
    'company_id': '1',
    'name': 'Gmail',
    'type': 'Communication'
}, {
    'company_id': '2',
    'name': 'Xbox',
    'type': 'Game Console'
}, {
    'company_id': '2',
    'name': 'Bing',
    'type': 'Web Search'
}, {
    'company_id': '3',
    'name': 'Yahoo! Publisher Network',
    'type': 'Web Advertising'
}
]}

Full Source Code

Ext.onReady(function() {
   Ext.define('Company', {
       extend: 'Ext.data.Model',
       fields: ['id', 'name', 'founded', 'people']
   });

   var store_company = new Ext.data.Store({
      model: 'Company',
      proxy: {
          type: 'ajax',
          url: 'company.json',
          reader: {
              type: 'json',
              root: 'companies'
          }
      }
   });

    var grid_company = Ext.create('Ext.grid.Panel', {
        store: store_company,
        columns: [
            {
                text     : 'Company Name',
                dataIndex: 'name'
            },
            {
                text     : 'Founded',
                width    : 200,
                dataIndex: 'founded'
            },
            {
                text     : 'Key People',
                width    : 250,
                dataIndex: 'people'
            }
        ],
        height: 200,
        width: 550,
        title: 'Company List',
        renderTo: 'grid-company',
        viewConfig: {
            stripeRows: true
        },
        listeners: {
            itemclick : function() {
                var data = grid_company.getSelectionModel().selected.items[0].data;
                grid_product.setTitle(data.name + ' Products List');
                store_product.clearFilter();
                store_product.filter('company_id', data.id);
                store_product.load();
            }
        }
    });

    store_company.load();

    Ext.define('Product', {
       extend: 'Ext.data.Model',
       fields: ['company_id', 'name', 'type']
    });

    var store_product = new Ext.data.Store({
      model: 'Product',
      proxy: {
          type: 'ajax',
          url: 'products.json',
          reader: {
              type: 'json',
              root: 'products'
          }
      }
    });

    var grid_product = Ext.create('Ext.grid.Panel', {
        store: store_product,
        columns: [
            {
                text     : 'Product Name',
                dataIndex: 'name',
                width    : 350,
            },
            {
                text     : 'Type',
                width    : 200,
                dataIndex: 'type'
            }
        ],
        height: 200,
        width: 550,
        title: 'Product List',
        renderTo: 'grid-product',
        viewConfig: {
            stripeRows: true
        }
    });
});

The main function in this example is the itemclick listener on the company name grid, we can directly filter the store by using filter() method, but remember to use clearFilter() too, otherwise each time the filter called, the filter condition will be stacked, somekind the “and” operator in programming.

listeners: {
    itemclick : function() {
        var data = grid_company.getSelectionModel().selected.items[0].data;
        grid_product.setTitle(data.name + ' Products List');
        store_product.clearFilter();
        store_product.filter('company_id', data.id);
        store_product.load();
    }
}

That a simple example using the static json data, to use other data like array or dynamic data, like fetching from php, you can modified the store component for example using the arraystore.

view demo | download source

strGroup2.load();
Ext.getCmp('txgroup_id').setValue(sel.data.group_id);

The problem is we have the combobox value but we want to display the matched record text, it displaying the value not the text, and for the illustration this the little example solution code.

var strGroup2 = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        fields: ['id', 'name'], root: 'groups'
    }),
    proxy: new Ext.data.HttpProxy({
        url: BASE_URL + 'group/ext_get_all', method: 'POST'
    })
});

strGroup2.load();

// grid component
var tbUsers = new Ext.Toolbar({
    items: [{
        text: 'Edit',
        id: 'tbUserEdit',
        handler: function() {
            var sm = gridUsers.getSelectionModel();
            var sel = sm.getSelected();
            Ext.getCmp('txgroup_id').setValue(sel.data.group_id);
        }
    }]
});

var formUserEdit = new Ext.FormPanel({
    frame: true,
    border: false,
    items: [{
        xtype:'fieldset',
        title: 'Login Detail',
        collapsible: true,
        autoHeight:true,
        defaultType: 'textfield',
        items: [{
            xtype: 'combo', fieldLabel: 'Group', width: 120,
            emptyText: 'Choose a group ...', allowBlank: false,
            mode: 'local', name: 'group_id', hiddenName: 'group_id',
            store: strGroup2, triggerAction: 'all',
            displayField: 'name', valueField: 'id',
            editable: 'false', id: 'txgroup_id'
        }]
    }]
    }
});

You can see on the code above, I assume the solution is the store have to be loaded when the page is loaded, not loaded when the edit button clicked, in my previous post about ExtJS simple user management, I’m not doing this so I have to tricking in the server side code. At least I know it right now.

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.

View Demo | Download Source

The ExtJS

The main component of this viewer is two dataview, one for thumbnails and another one for the original image. When a thumbnail clicked the relevant image show in the dataview that contain the original image, using some old html trick, jump to some html element based on id, like #divid.

Ext.onReady(function() {
    /* =======================================
     * start component for thumbnails panel */
    var storeThumbs = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
            url: 'get-images.php', method: 'POST'
        }),
        root: 'images',
        fields: [
            'id', 'name', 'url',
            { name: 'size', type: 'float' },
            'thumb_url'
        ]
    });

    storeThumbs.load();

    var tplThumbs = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-box">',
                '<a href="#{id}">',
                    '<img src="{thumb_url}" title="{name}">',
                '</a>',
            '</div>',
        '</tpl>'
    );

    var dvThumbs = new Ext.DataView({
        autoScroll: true, store: storeThumbs, tpl: tplThumbs,
        autoHeight: false, height: 410, multiSelect: true,
        overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        border: false
    });

    // Panel for the thumbnails
    var panelThumbs = new Ext.Panel({
        region: 'west',
        split: false,
        width: 160,
        margins:'5 5 5 0',
        items: [dvThumbs]
    });
    /* end component for thumbnails panel
     * =================================== */

    /* =======================================
     * start component for large panel */
    var storeLarge = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
            url: 'get-images.php', method: 'POST'
        }),
        root: 'images',
        fields: [
            'id', 'name', 'url',
            { name: 'size', type: 'float' },
            'thumb_url'
        ]
    });
    storeLarge.load();

    var tplLarge = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="large-box" id="{id}">',
                '<img src="{url}" title="{name}">',
            '</div>',
        '</tpl>'
    );

    var dvLarge = new Ext.DataView({
        autoScroll: true, store: storeLarge, tpl: tplLarge,
        autoHeight: false, height: 410, multiSelect: true,
        overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        border: false
    });

    // Panel for large images
    var panelLarge = new Ext.Panel({
        region: 'center',
        margins:'5 0 5 0',
        items:[dvLarge]
    });
    /* end component for large panel
     * =================================== */

    var win = new Ext.Window({
        title: 'ExtJS Images Viewer',
        closable: false,
        width: 620,
        height: 450,
        border: false,
        plain: true,
        layout: 'border',
        items: [panelThumbs, panelLarge]
    });

    win.show(this);
});

The PHP

This php code is very similar to the script from the ExtJS image gallery post, just add an id inside the array.

<?php
$dir = "img/large/";
$dir_thumbs = "img/thumbs/";

$images = array();
$d = dir($dir);
$loop = 0;
while($name = $d->read()){
    if(!preg_match('/\.(jpg|gif|png)$/', $name)) continue;
    $size = filesize($dir.$name);
    $thumb = $name;
    $loop++;
    $images[] = array('id'=> 'img_'.$loop, 'name' => $name,
                    'size' => $size, 'url' => $dir.$name,
                    'thumb_url' => $dir_thumbs.$thumb);
}
$d->close();
$o = array('images'=>$images);
echo json_encode($o);

Dataview CSS

.thumb-box  {
    width: 100px;
    padding: 5px;
    text-align: center;
    margin: 13px auto;
    background: #ccd8e7;
    border: 1px solid #99BBE8;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}

.thumb-box:hover {
    background: #999999;
    border-color: #999999;
}

.large-box {
    width: 375px;
    margin: 15px auto;
}

View Demo | Download Source

Credit Images: Flickr [ images 1 ], [ images 2 ], [ images 3 ], [ images 4 ], [ images 5 ]

If you want to know the detail about google search API, you can refer this link.

The ExtJS Code

The ExtJS code contains Windows, gridPanel, pagingToolbar, searchField

Ext.onReady(function() {
    var store = new Ext.data.JsonStore({
        root: 'results',
        totalProperty: 'totalCount',
        remoteSort: true,

        fields: [
            'GsearchResultClass',
            'unescapedUrl',
            'url',
            'visibleUrl',
            'cacheUrl',
            'title',
            'titleNoFormatting',
            'content'
        ],

        proxy: new Ext.data.HttpProxy({
            url: 'search.php'
        })
    });

    function renderResult(value, p, record){
        return String.format(
            '<a class="link" href="{1}" target="_blank">{0}</a>',
            record.data.title, record.data.unescapedUrl);
    }

    var grid = new Ext.grid.GridPanel({
        border: false,
        width: 485,
        height: 430,
        store: store,
        loadMask: true,
        columns: [{
            header: 'Results',
            dataIndex: 'title',
            width: 480,
            renderer: renderResult
        }],

        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                p.body = '<p class="excerpt">'+record.data.content+'</p>';
            }
        },
        tbar: [
            '->',
            new Ext.ux.form.SearchField({
                store: store,
                width: 200,
                emptyText: 'Google Search'
            })
        ],
        bbar: new Ext.PagingToolbar({
            pageSize: 8,
            store: store,
            displayInfo: true
        })
    });

    var window = new Ext.Window({
        title: 'Google Web Search - ExtJS & PHP',
        width: 500,
        height: 460,
        closable: false,
        resizable: false,
        items: [grid]
    }).show();
});

The Search Field used is from the ExtJS ux you can found it on the example section, and it placed in the gridPanel toolbar, inside the GridPanel there is a viewConfig, I’m following this example, this is for displaying search result content (short description)

The PHP Code

The PHP code used to make me easier generating json format so ExtJS can be easily read all the data

<?php

$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 8;

$q = str_replace(" ", "%20", $_REQUEST['query']);
$key = "insert your key";

$url = 'https://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='.$q.'&start='.$start.'&rsz='.$limit.'&key='.$key;

$content = file_get_contents($url);
$array = json_decode($content);

$data = array();

foreach ($array->responseData->results as $var => $value)
{
    $data[] = array(
        "GsearchResultClass" => $value->GsearchResultClass,
        "unescapedUrl"       => $value->unescapedUrl,
        "visibleUrl"         => $value->visibleUrl,
        "cacheUrl"           => $value->cacheUrl,
        "title"              => $value->title,
        "titleNoFormatting"  => $value->titleNoFormatting,
        "content"            => $value->content
    );
}

$out = array(
    "success" => true,
    "totalCount" => $array->responseData->cursor->estimatedResultCount,
    "results" => $data
);

echo json_encode($out);

?>

The CSS Code

This is the simple CSS code for customizing the grid row style

.link {
    color: #333;
    line-height: 25px;
    text-decoration: none;
    font-size: 13px;
    padding: 5px 10px;
    display: block;
    -webkit-border-radius: 1.0em;
    -moz-border-radius: 1.0em;
    border-radius: 1.0em;
}
.link:hover {
    background: #333;
    color: #f3f3f3;
}
.excerpt {
    padding: 5px 20px;
    color: #999;
}

Here is the result

View Demo | Download Source

View Demo | Download Source

First I modified the store component

var store = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        root:'images', totalProperty: 'result'
        }, [ 'name', 'thumb_url' ]
    ),
    proxy: new Ext.data.HttpProxy({
        url: 'get-images.php', method: 'POST'
    })
});

The store varible I changed to Ext.data.Store component and the reader must be in JsonReader otherwise it will not work for me, and now create the paging toolbar component

var pagingbar = new Ext.PagingToolbar({
    style: 'border:1px solid #99BBE8;',
    store: store,
    pageSize: 5,
    displayInfo: true
});

The Ext.PagingToolbar is a subclass of the Ext.Toolbar so it can be included in panel component as an items, here what it look like

var panelMain = new Ext.Panel({
    id: 'images-view',
    frame: true,
    width: 640,
    height: 200,
    autoHeight: true,
    layout: 'auto',
    title: 'ExtJS DataView With Pagination',
    items: [pagingbar,datav]
});

And lastly is the PHP code that I modified

<?php
$dir_thumbs = "img/thumbs/";

$images = array();
$d = dir($dir_thumbs);

$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 5;

while($name = $d->read()){
    if(!preg_match('/\.(jpg|gif|png)$/', $name)) continue;
    $size = filesize($dir_thumbs.$name);
    $lastmod = filemtime($dir_thumbs.$name)*1000;
    $images[] = array(
        'name' => $name,
        'thumb_url' => $dir_thumbs.$name
    );
}

$result = count($images);

if ($start == 0) {
    $finish = $limit;
} else {
    $finish = $start + $limit;
}

$fetch_images = array();
for ($i = $start; $i < $finish; $i++) {
    $fetch_images[] = $images[$i];
}

$d->close();
$o = array('result' => $result, 'images' => $fetch_images);
echo json_encode($o);

The data I fetched by reading all files in the a location in the directory, with adding the pagination feature, you can modified it whether you want to get data from database, and using some sql limit function, it’s up to you.

View Demo | Download Source

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

-- Table structure for table `groups`

CREATE TABLE IF NOT EXISTS `groups` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `user_add` int(1) NOT NULL,
  `user_edit` int(1) NOT NULL,
  `user_delete` int(1) NOT NULL,
  `group_add` int(1) NOT NULL,
  `group_edit` int(1) NOT NULL,
  `group_delete` int(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

-- Table structure for table `users`

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `group_id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `real_name` varchar(150) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

The groups table contains id, group name and all the action that user can do to the application, from the user_add field until group_delete column the value only contains 1 or 0, which mean 1 for user can do this action and zero otherwise, The idea to managing user interface is by disabling the button on the toolbar based on the user group permissions and this are generated from groups table, so we need to give a unique Id for each button.

As well in the controller there are two controller that we need to create, user controller in application/controllers/user.php and group controller in application/controllers/group.php. Inside the user controller create the function for login and fetching users session inside user controller

public function ext_login()
{
    $cond = array(
        'username' => $_POST['textusername'],
        'password' => $_POST['textpassword']
    );
    $query = $this->db->get_where('users', $cond);
    if ($query->num_rows() != 0)
    {
        $row = $query->row();

        // get group detail
        $g_cond = array(
            'id' => $row->group_id
        );
        $g_query = $this->db->get_where('groups', $g_cond);
        $g_row = $g_query->row();

        // pass the the info to session
        $this->session->set_userdata('u_id', $row->id);
        $this->session->set_userdata('u_name', $_POST['textusername']);
        $this->session->set_userdata('g_id', $g_row->id);
        $this->session->set_userdata('g_u_add', $g_row->user_add);
        $this->session->set_userdata('g_u_edit', $g_row->user_edit);
        $this->session->set_userdata('g_u_delete', $g_row->user_delete);
        $this->session->set_userdata('g_g_add', $g_row->group_add);
        $this->session->set_userdata('g_g_edit', $g_row->group_edit);
        $this->session->set_userdata('g_g_delete', $g_row->group_delete);

        echo "{success:true}";
    }
    else
    {
        echo "{success:false, error:'User not found!'}";
    }
}

public function ext_get_session()
{
    $output = "{success:true, sessions: {";
    $output .= "u_id: '".$this->session->userdata('u_id')."',";
    $output .= "u_name: '".$this->session->userdata('u_name')."',";
    $output .= "g_id: '".$this->session->userdata('g_id')."',";
    $output .= "g_u_add: '".$this->session->userdata('g_u_add')."',";
    $output .= "g_u_edit: '".$this->session->userdata('g_u_edit')."',";
    $output .= "g_u_delete: '".$this->session->userdata('g_u_delete')."',";
    $output .= "g_g_add: '".$this->session->userdata('g_g_add')."',";
    $output .= "g_g_edit: '".$this->session->userdata('g_g_edit')."',";
    $output .= "g_g_delete: '".$this->session->userdata('g_g_delete')."'";
    $output .= "}}";
    echo $output;
}

The ext_get_sessions function above is to get session and pass it to the browser, and in the login function the session value will be defined when user logged in to the system, ext_get_sessions function will be used in the permissions.js, I’m sure you can add the logout function contain the code to unset all the sessions value and here the permissions function look like inside the permissions.js

 function setPermissions() {
    Ext.Ajax.request({
        url: BASE_URL + 'user/ext_get_session',
        method: 'POST',
        success: function(o) {
            var obj = Ext.util.JSON.decode(o.responseText);
            // set enable/disable grid panel
            if (obj.sessions.u_id != '') {
                Ext.getCmp('fLogin').setDisabled(true);
                Ext.getCmp('gUsers').setDisabled(false);
                Ext.getCmp('gGroups').setDisabled(false);
                Ext.getCmp('userLabel').setText('Welcome "'+obj.sessions.u_name+'"');
            } else {
                Ext.getCmp('fLogin').setDisabled(false);
                Ext.getCmp('gUsers').setDisabled(true);
                Ext.getCmp('gGroups').setDisabled(true);
                Ext.getCmp('userLabel').setText('Please Login');
            }

            // set users toolbar button
            if (obj.sessions.g_u_add == '1') {
                Ext.getCmp('tbUserAdd').setDisabled(false);
            } else {
                Ext.getCmp('tbUserAdd').setDisabled(true);
            }
            if (obj.sessions.g_u_edit == '1') {
                Ext.getCmp('tbUserEdit').setDisabled(false);
            } else {
                Ext.getCmp('tbUserEdit').setDisabled(true);
            }
            if (obj.sessions.g_u_delete == '1') {
                Ext.getCmp('tbUserDelete').setDisabled(false);
            } else {
                Ext.getCmp('tbUserDelete').setDisabled(true);
            }

            // set groups toolbar button
            if (obj.sessions.g_g_add == '1') {
                Ext.getCmp('tbGroupAdd').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupAdd').setDisabled(true);
            }
            if (obj.sessions.g_g_edit == '1') {
                Ext.getCmp('tbGroupEdit').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupEdit').setDisabled(true);
            }
            if (obj.sessions.g_g_delete == '1') {
                Ext.getCmp('tbGroupDelete').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupDelete').setDisabled(true);
            }
        }
    });
}

As you can see on the code above, I manipulate the ExtJS component based on “Id”, so we need to to add Id properties for the required component,  here a part of login form script and the form id I called it ‘fLogin’ ( assets/js/login.js )

// part of login.js
var loginForm = new Ext.FormPanel({
    id: 'fLogin'
});

function fnLogin() {
    loginForm.getForm().submit({
        success: function() {
            setPermissions();
            strUsers.load();
        },
        failure: function(form, o) {
            if (typeof(o.response) != 'undefined') {
                var json = o.response.responseText;
                var r = Ext.util.JSON.decode(json);
                Ext.Msg.alert('Login failed', r.error);
            }
        }
    });
}

Now part of the user script in ExtJS ( assets/js/user.js )

// part of user.js
var tbUsers = new Ext.Toolbar({
    items: [{
        text: 'Add',
        id: 'tbUserAdd'
    }, '-', {
        text: 'Edit',
        id: 'tbUserEdit'
    }, '-', {
        text: 'Delete',
        id: 'tbUserDelete'
    }, '->', {
        text: '',
        xtype: 'label',
        style: 'color:#0066cc;font-weight:bold;',
        id: 'userLabel'
    }, '-', {
        text: 'Logout'
    }]
});

var gridUsers = new Ext.grid.GridPanel({
    id: 'gUsers'
});

In the group script (assets/js/group.js)

var tbGroups = new Ext.Toolbar({
    items: [{
        text: 'Add',
        id: 'tbGroupAdd'
    }, '-', {
        text: 'Edit',
        id: 'tbGroupEdit'
    }, '-', {
        text: 'Delete',
        id: 'tbGroupDelete'
    }]
});

var gridGroups = new Ext.grid.GridPanel({
    id: 'gGroups'
});

For the adding and editing users and group I’m using a pop up window that have form to be submitted inside it, and for delete action I’m just using simple alert confirmation box. Well I think it is too much if I show all the code in this post, just go to the download link if you want to see full source code of this example, and here some of the screen capture.

Download Source

First we create the menu that we want

var menu1 = new Ext.menu.Menu({
    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'
        }
    ]
});

You can freely create any custom menu cause in this post there are no function handler in each menu, And the dataview, this is the part in my previous post about creating image gallery using dataview

var datav = new Ext.DataView({
    autoScroll: true, store: store, tpl: tpl,
    autoHeight: false, height: 250, multiSelect: true,
    overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
    emptyText: 'No images to display',
    style: 'border:1px solid #99BBE8;',
    listeners: {
        render: {
            fn: function() {
                 Ext.getBody().on("contextmenu", Ext.emptyFn,
                    null, {preventDefault: true});
            }
        },
        contextmenu: {
            fn: function(obj, index, node, event) {
                x = event.browserEvent.clientX;
                y = event.browserEvent.clientY;
                menu1.showAt([x, y]);
            }
        }
    }
});

When the data view is rendered it disabling the default right click web browser menu, I get it from this blog post, this is called in listeners “render” event and “contexmenu” event is for detecting right click mouse event, capture the mouse cursor position and displaying the menu. Here the screenshot, source code and the online demo.

Download Source | View Demo

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)');
});

The database name is “mydb” and create table “notes”, the “x” and “y” table fields is for storing the last window component position from each notes. The next code below is to saving the new notes or updating existing notes.

function save(obj, x, y) {
    var notesid = obj.replace("notes", "");
    var notesval = document.getElementById(obj).value;
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM notes WHERE id = ?', [notesid],
        function (tx, results) {
            if (results.rows.length == 1) {
                // do update
                db.transaction(function (tx) {
                    tx.executeSql('UPDATE notes SET notes = ? ' +
                        'WHERE id = ?', [notesval, notesid]);
                });
            } else {
                // insert new row
                db.transaction(function (tx) {
                    tx.executeSql('INSERT INTO ' +
                        'notes(id, notes, x, y) VALUES (?,?,?,?)',
                        [notesid, notesval, x, y]);
                });
                document.getElementById(obj).style.backgroundColor  = '#FFCC00';
                document.getElementById(obj).style.color  = '#333';
            }
        });
    });
}

This function is will be applied on textarea inside the window component and triggered with “onchange” event, it will check the existing notes id if exist, it will updating the note, otherwise insert new note and changing the textarea stlye and here is the code for the extjs window

Ext.onReady(function(){
    var win = new Array();
    var button = Ext.get('show-windows');
    var counter = 1;

    function createWindow(notes, x, y) {
        if (typeof(notes) == 'object') {
            // setting new notes config, default text and position
            notes = 'Write new notes here ... ';
            x = 50 + (15 * Math.floor(Math.random()*11));
            y = 50 + (15 * Math.floor(Math.random()*11));
            cssnotes = 'txareanew';
        } else {
            cssnotes = 'txarea';
        }
        win[counter] = new Ext.Window({
            id: 'win' + counter,
            resizable: false,
            html: '<textarea class="'+cssnotes+'" maxlength="100" ' +
                    'onchange="save(this.id, '+x+', '+y+')" ' +
                    'id="notes'+counter+'">' + notes + '</textarea>',
            pageX: x,
            pageY: y,
            width: 300,
            closable: false,
            height: 290,
            plain: false,
            border: false,
            listeners: {
                'move': function() {
                    wid = this.id.replace("win", "");
                    winx = this.x;
                    winy = this.y;
                    db.transaction(function (tx) {
                        tx.executeSql('UPDATE notes ' +
                            'SET x = ?, y = ? WHERE id = ?',
                            [winx, winy, wid]);
                    });
                }
            },
            buttons: [{
                id: 'delbtn' + counter,
                text: 'Delete',
                handler: function() {
                    nid = this.id.replace('delbtn', '');
                    db.transaction(function (tx) {
                        tx.executeSql('DELETE FROM notes ' +
                            'WHERE id = ?', [nid]);
                    });
                    win[nid].close();
                }
            }]
        }).show();
        counter = counter + 1;
    }

    // init existing notes
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM notes', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 1; i <= len; i++) {
                counter = results.rows.item(i-1).id;
                createWindow(
                    results.rows.item(i-1).notes,
                    results.rows.item(i-1).x,
                    results.rows.item(i-1).y
                );
            }
        });
    });

    button.on('click', createWindow);
});

The first conditional statement in createWindow function is to check whether the window that we will create is for the existing note or for new note, if for new note the window position (x, y) will be generated, otherwise the (x, y) position is fetched from database, and here the additional code (html and css)

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>

    <script type="text/javascript">
    // The above javascript code goes here
    </script>
    <style type="text/css">
        p {
            background: #e3e3e3;
            padding: 10px;
        }
        p input {
            width: 120px;
            height: 30px;
        }
        .txarea {
            width:290px; height:300px; background:#FFCC00; padding:5px;
            font-style:italic; border:none; color:#333;
            font-size:28px; font-family:"Times New Roman";
        }
        .txareanew {
            width:290px; height:300px; background:#e3e3e3; padding:5px;
            font-style:italic; border:none; color:#999;
            font-size:28px; font-family:"Times New Roman";
        }
    </style>
    <title>Extjs Dynamic Windows</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <p>
      <input type="button" id="show-windows" value="Create New Note"/>
    </p>
    <div id="container"></div>
  </body>
</html>

That’s all I can do for now you can see the screenshot, live demo and download all the source following the link below

Download Source | View Demo

note: only working on Google Chrome, Apple Safari and Opera

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

<?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);

?>

The backend PHP is to getting server data, I just declaring simple data, you can change it whatever you like.

ExtJS Javascript code is inside the html file, my file named index.html

<script type="text/javascript">

function oncheck(str) {
    if (Ext.fly('box' + str).hasClass('checked')) {
        Ext.fly('box' + str).removeClass('checked');
        document.getElementById('check'+str).checked = false;
    } else {
        Ext.fly('box' + str).addClass('checked');
        document.getElementById('check'+str).checked = true;
    }
}

Ext.onReady(function(){
    var proxyData = new Ext.data.HttpProxy({
        url: 'get-data.php'
    });

    var strData = new Ext.data.JsonStore({
        proxy: proxyData,
        root: 'data',
        fields: [
            'id', 'message'
        ]
    });

    var tplData = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="databox" id="box{id}" onclick="oncheck({id})">',
            '<input type="checkbox" id="check{id}" value="c{id}"> ',
            '&nbsp;{message}</div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );

    var dataV = new Ext.DataView({
        autoScroll: true, store: strData, tpl: tplData,
        autoHeight: false, height: 265,
        multiSelect: true, itemSelector: 'div.thumb-wrap',
        emptyText: 'No data to display',
        loadingText: 'Please Wait...',
        style: 'border:1px solid #99BBE8;background:#fff;'
    });

    function checkvalue() {
        var obj = Ext.select('input[type=checkbox]').elements;
        var i = 0;
        var cb = '';
        var total = 0;
        for (i=0; i<obj.length; i++) {
            if (obj[i].checked) {
               cb = cb + ' ' + obj[i].value;
               total++;
            }
        }
        Ext.MessageBox.alert('Checked', 'You clicked ' + total + ' checkbox, they value are ' + cb);
    }

    var panel = new Ext.Panel({
        title: 'List Data View', frame: true, width: 400,
        height: 340, id: 'panelBottom', style: 'margin: 0 auto;',
        renderTo: 'bottom', items: [dataV],
        buttons: [{
            text: 'Get Checked',
            handler: checkvalue
        }]
    });

    strData.load();
});
</script>

As you can see on the code above the script is to showing dataview inside panel component, dataview render the template declaration that defined in XTemplate component, every rendered data have its own unique id, see code below (a part of ExtJS code above)

var tplData = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="databox" id="box{id}" onclick="oncheck({id})">',
        '<input type="checkbox" id="check{id}" value="c{id}"> ',
        '&nbsp;{message}</div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);

Every time the users click on the div (which have css class “databox”) the checkbox will be checked or unchecked and the div style changing, I’m using the Ext.fly function inside oncheck(str) function to do this, the oncheck(str) function must be placed outside the Ext.onReady(function()) otherwise it will not work, I still don’t know why this is happen.

And the last is to get checked value, I achieve this by putting handler inside a button, this is another part of the ExtJS code above

function checkvalue() {
    var obj = Ext.select('input[type=checkbox]').elements;
    var i = 0;
    var cb = '';
    var total = 0;
    for (i=0; i<obj.length; i++) {
        if (obj[i].checked) {
           cb = cb + ' ' + obj[i].value;
           total++;
        }
    }
    Ext.MessageBox.alert('Checked', 'You clicked ' + total + ' checkbox, they value are ' + cb);
}

What I do this is selecting all the checkbox elements in HTML an looping through all the detected checbox and getting the value to showed is ExtJS MessageBox. Yup that all, as usual you can see the example screenshot below, download all the code and see the online example.

View Demo | Download Source