Posts In "Extjs"

Dynamic Window in ExtJS

September 11th, 2010 by aditia rahman / No Comments  

     

Sometimes we need to show a dynamic information on the pop up windows like alert, warning, notification or something else. In Extjs we can use window component to show this pop up feature, but this simple code is my little idea to creating dynamic window in Extjs, let get straight to the code

Passing Json Format from PHP to ExtJS

August 22nd, 2010 by aditia rahman / No Comments  

     

When I wrote my previous post, there are some function in PHP that sent the output as Json format to be used in JsonStore component, sometimes I create the json format manually with string concatenation, looping through the data, this is quite simple actually, but I write this post because when I got an error from this json format, it make me feel a bit dizzy for example:

$query = $this->db->get('products');
$json = "{'products':[";
foreach($query->result() as $data)
{
	$json .= '{"id":"'.$data->id.'",
				"name":"'.$data->name.'",
				"price":"'.$data->price.'",
				"image":"'.$data->image.'"},';
}
$json .= "]}";
echo $json;

Drag and Drop Shopping Cart Using ExtJS and CodeIgniter Cart

August 21st, 2010 by aditia rahman / 10 Comments  

     

This is my other post about simple usage of ExtJS with CodeIgniter, this time I want to create a simple drag and drop shopping cart, I have learn about how to use the cart class in CodeIgniter that I have posted in the previous post, i’m using MySQL for the storing the product data. I prepared the mockup it something like this

[News] Sencha is Preparing The New ExtJS 4

August 13th, 2010 by aditia rahman / No Comments  

     

While this post is created, I browsing the official Sencha Site, and there is an event on the site called Sencha Conference 2010 in San Fransisco, and I hope one day I could be there too. So I just browsing the session that planned inside the conference, and you know what? Sencha is getting prepared for ExtJS 4, Wow, just wondering what next cool feature that ExtJS have.

sencha conference

If you are browsing the sessions menu on the site you can see the topic like introduction to ExtJS 4 and ExtJS 4 architecture, on the first day.

CRUD using CodeIgniter and EXTJS Grid Part 4

August 11th, 2010 by aditia rahman / 15 Comments  

     

It’s been quite a long time since I updated this blog, just continue my blogging journey with very simple post. I have been suggested by Taguchi from the previous post, to adding autosearch filtering to this example, the system will search while user input a value in the searchbox. If you haven’t follow any of this here is the link:
1. CRUD using CodeIgniter and EXTJS Grid Part 1
2. CRUD using CodeIgniter and EXTJS Grid Part 2
3. CRUD using CodeIgniter and EXTJS Grid Part 3
Actually it is quite easy you just have to enable the keyEvent and add a key listeners to the searchUsers component, this is how it look:

ExtJS: Passing Parameter in Function Handler

July 31st, 2010 by aditia rahman / 1 Comment  

     

This is a very short post in my ExtJS posts, when we dealing with handler config in many component sometimes we want to passing the parameter inside the function, so here the simple code on how I do it

Ext.onReady(function() {
    var myHandler = function (name){
       Ext.Msg.alert('Notification', 'Hello ' + name);
    };

    var form = new Ext.FormPanel({
        frame: true, border: false, buttonAlign: 'center',
        url: 'test.php', method: 'POST',
        buttons: [{
            text: 'Submit Test',
            handler: myHandler.createDelegate(this, ['Luffy'])
        }]
    });

    var winLogin = new Ext.Window({
        title: 'Function Handler Parameter',
        layout: 'fit', width: 200,
        height: 80, resizable: false,
        border: false,
        closable: false, items: [form]
    });
    winLogin.show();
});

Get Latest Tweet Using ExtJS DataView and PHP

July 27th, 2010 by aditia rahman / 5 Comments  

     

Recently I love twitter, even though I didn’t tweet too often, cause I found many great link from the people that I follow. In this post, I want to create a little twitter client to getting the latest tweets by specific username using ExtJS DataView, cause the app are just getting the tweets the it doesn’t have to authenticate the users, let get straight to the code:

Extjs: Simple Image Gallery Using DataView and PHP

July 21st, 2010 by aditia rahman / 18 Comments  

     

Last week I tried some of the extjs dataview example, it really great, just my thought, why not creating simple image gallery with dataview? All that we need is provided in the example (the panel, fileinputfield, the xtemplate) and this is the page wire frame that I created using Pencil Firefox Plugins.

Ext JS Dataview Gallery Wire Frame

Extjs: Basic Multiple File Upload

July 17th, 2010 by aditia rahman / 5 Comments  

     

Uploading file on Extjs is quite simple you can use the ux plugin from example site or find the 3rd party plugins or extension (whatever you called it), in this post I want to implement the multiple upload using default plugins from extjs example one another one using 3rd party plugin called “awesome uploader”

Using Default Extjs Ux File Input

You need to include these two files on your Extjs application, they are the js file in folder “examples\ux\fileuploadfield\FileUploadField.js” and the css file in folder “examples\ux\fileuploadfield\css\fileuploadfield.css”, then you can add field on the FormPanel with xtype “fileuploadfield” and add config “name” (this will processed by server) for example in my formpanel

CRUD using CodeIgniter and EXTJS Grid Part 3

July 13th, 2010 by aditia rahman / 39 Comments  

     

This is the final post of the series CodeIgniter and Extjs CRUD, if you want to read the previous posts, here the first part and the second part of this post. Basically we already finish all the crud feature on the second part this only another common feature to add in the application, so we will add a quick search field on the grid, and what you need is the search grid plugin, I’m using the extjs example search field plugin from this extjs grid tutorial, you can download the complete code and find this file searchfield.js and put it your desire folder, in this post i put on the “assets/js/ext/plugins/” folder. Now all you have to do just include the js file in the view file and change the controller method.