Posts In "Extjs"

CRUD using CodeIgniter and EXTJS Grid Part 2

July 12th, 2010 by aditia rahman / 27 Comments  

     

This post is continuation of the part 1, in part 1 we already created the Extjs grid with pagination and load the store grid from the database, in this part we will add the save, edit and delete feature to that grid, and for make it easier it will use the editor grid.

First Edit The View ( in “application/views/user/index.php” )

We will use the editorGrid, one of them should be editable on the combobox field and the value is fetched from the database, so we create country store component and set like the code below (in this step we haven’t created the method to get all countries. it described in the controller section).

CRUD using CodeIgniter and EXTJS Grid – Part 1

July 10th, 2010 by aditia rahman / 22 Comments  

     

In this post I want to share how to create simple CRUD (create, read, update, delete) using codeigniter ExtJS editor grid. In this first part, we will setup the database schema, codeigniter and extjs. I limited this first part, only setup fetching data from database and pagination grid in extjs grid.

1. Create Database Schema

The table that we will use is two tables with “has one” relationship, namely users table with foreign key country_id and countries table that store all the countries data, so when we want to know the country name from the users we have to get from the countries table, and here the sql for creating the table.

ExtBox: An Extcore lighbox plugin

July 6th, 2010 by aditia rahman / 1 Comment  

     

Yesterday I googling some tutorial about extcore, sure it is not easy to find example using extcore since the jquery is very popular and maybe some other time I will use jquery too, but the great thing is I found ExtBox, and in this very sort post I want to share it with you. ExtBox is an Extcore Plugin to create customizable light box, it is very light weight and the demo provide variety of LightBox themes, just chek it out the ExtBox

extbox_pirobox-style

Create Spy With ExtCore

July 6th, 2010 by aditia rahman / No Comments  

     

This post is a sort post describing how to create simple spy, if you don’t know what the spy yet, check the digg spy, that is very cool infographic to displaying updated content from it users, but when this post is created digg using flash technology to pooling data from the server, but this post using extcore to pooling data from the server, and the code is not really have big different from my previus post, I just create single file and include one js file (it’s the extcore.js file of course), that file i called “index.php”, now here we go.

Project based on ExtJS

July 3rd, 2010 by aditia rahman / 7 Comments  

     

We all agree that Extjs is a cool full stack web user interface and javascript framework for building rich client web application, the company creator has provided us a lot great example, but sometimes I wonder how people use it in their real project, therefore I look for some project using Extjs and here it goes

1. TomatoCart

TomatoCart is the new generation of open source shopping cart solution developed by Elootec Technology Co., Ltd. It is branched from osCommerce 3 as a separate project. Extjs used in the admin section and it be made desktop look a like, very cool, you can see the demo both the admin or the front page.

Load Content Scroll Using EXT Core and PHP

June 22nd, 2010 by aditia rahman / No Comments  

     

Extcore is one the Extjs product, but the company name now called sencha, read this why extjs changes their name. If you using full stack Extjs source the Extcore must be included in the source, in this post I want to show how to load content while window scroll from the server using Extcore, this feature maybe useful when users want to see more data than visible on the screen maybe like facebook wall, actually this post is similar to another post i found, but using jquery (they are in 9lessons.info and webresourcesdepot.com), in this example i’m just using one file and the data is hardcoded from array

So lets start, here’s the php code

<?php

$data = array(
    0 => array('post' => 'Post Number 0')
);

for ($i=1; $i<=50; $i++) {
    $tmp_data = array(
        $i => array('post' => 'Post Number ' . $i)
    );
    $data = array_merge($data, $tmp_data);
}

// get next 10 row data,
if (isset($_GET['act'])) {
    $start = ($_GET['page'] * 10) + 1;
    $finish = $start + 10;
    if ($finish <= count($data)) {
        echo '<div class="data newhead">Loaded Data &darr;</div>';
        for ($i=$start; $i<$finish; $i++) {
            echo '<div class="data">'.$data[$i]['post'].'</div>';
        }
    } else {
        echo 'stop';
    }
    exit;
}

?>

Extjs : Form Submit With Enter Key Event

June 4th, 2010 by aditia rahman / 21 Comments  

     

This is the short post that I want to share, cause last year I had created form in Extjs and submitted using ENTER key event so I want to share that here the simple code in Extjs form to enabling ENTER key event, but using this code your mouse cursor should be focused on one of the field inside the form, this is very simple so I don’t think I need to provide the downloadable source code, here it goes:

Ext.onReady(function(){
    var formLogin = new Ext.FormPanel({
        frame: false, border: false, buttonAlign: 'center',
        url: BASE_URL + 'user/extjs_login', method: 'POST',
        id: 'frmLogin',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Username',
            id:'fldusername',
            name: 'username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            fieldLabel: 'Password',
            id:'fldpassword',
            name: 'password',
            allowBlank: false,
            inputType: 'password'
        }],
        buttons: [
            { text: 'Login' },
            { text: 'Reset', handler: function() {
                    formLogin.getForm().reset();
                }
            }
        ],
        keys: [
            { key: [Ext.EventObject.ENTER], handler: function() {
                    Ext.Msg.alert("Alert","Enter Key Event !");
                }
            }
        ]
    });

    var winLogin = new Ext.Window({
        title: 'Extjs Enter Key Event', layout: 'fit',
        width: 340, height: 140, resizable: false,
        closable: false, items: [formLogin]
    });

    winLogin.show();
});

Creating Register and Login Form Using EXTJS and CodeIgniter

June 2nd, 2010 by aditia rahman / 95 Comments  

     

Like another tutorial this post will create the basic form login and register using Extjs and Codeigniter, and I want to mix my previous post about Codeigniter Session Library, Extjs Unique Field Validation and using Statusbar in Extjs Window.

1. Setting up the database

Using phpmyadmin in XAMPP I create the database named “ci_extjs_login”, and create simple “users” table, here below is the sql code that I generated from phpmyadmin, for more advance database modelling you can use mysql workbench.

CREATE TABLE  `ci_extjs_login`.`users` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 100 ) NOT NULL ,
`password` VARCHAR( 100 ) NOT NULL ,
`email` VARCHAR( 100 ) NOT NULL
) ENGINE = MYISAM ;

EXTJS: Window Form Masking With Statusbar

May 24th, 2010 by aditia rahman / No Comments  

     

In this tutorial i want to show you how to masking a form when user enter a submit button, statusbar that used in this tutorial is from the Extjs ux example, so I borrow this cause it is useable plugin, like always on the server side process I use simple PHP scripting. I created this post because when I used a form in Extjs and the user make a request it seem not really responsive, the system should interact the user, inform what is going on in the system and most user is not advance user. Let’s get started:

1. Setting the StatusBar

Copy the StatusBar css file and icon from the default examples to your desired folder, first the css file you can find it in “extjs/examples/ux/statusbar/css/statusbar.css”, I copy it to another folder called “css” and next the statusbar icon is in “/extjs/examples/ux/statusbar/images” and I copy all the icon files to another folder called “img” most the file structure you can see it on the image on the right, this is how it look in Netbeans project. You can see the “form_masking.html” and “server_response.php” file, this is the main file that we have to create, and it will be mentioned on the next step, but before that we have to edit the StatusBar.css file that we have copied so the icon can be loaded, by changing the “background-image” properties. So find this all code like this

EXTJS: Getting each row value from the grid

May 14th, 2010 by aditia rahman / 13 Comments  

     

When I write this post, a friend of mine asking me how to get the value from all the row in EXTJS grid, she use EditorGridPanel to make the grid editable by it’s user, and submit all edited value in each row to the server i’m using php to take all the server side process). Actually the idea is very simple, the grid need to have sm config options it is a shorthand for selModel and this config that make the grid can be selected per row, and you can added the checkboxselection model to choose the row that you desired, so trid to make it simple tutorial, and at the of the post you can download the source from this post.

1. Setting the main page
Include the EXTJS file (javascript and css) in html header file, then create single div with an id to where the grid to put on, and i’m using inline css style to centering the div the on the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"; ?>"></script>
<script type="text/javascript" src="extjs/ext-all.js"; ?>"></script>
</head>

/* This should be fill with the EXTJS script code
 * It explain on the next step
 */

// on the body section
<body>
<div id="grid-example1" style="height: 200px;width:600px;margin:0 auto;padding:20px;"></div>
</body>
</html>