Saturday, March 19, 2011

Ext.Direct and ExtJs form panel submit

Hello,

Recently I am working with Ext.Direct in one of my ExtJs project. So first of all let's see what is Ext.Direct? Ext.Direct is server side stack for Rich Internet Application. Using this you can call server side methods in client side script. Something like remoting in .Net and remote method invocation in Java.  You can set up Ext.Direct to work with ExtJs applications. So its kind of an API. Methods of PHP class can be called in JavaScript.  Following is the syntax to call server side methods.

Application.Init() 

I had some issues with ExtJs form panel. On form submit I was using Ext.Direct API to send parameters to back end. But it was not working as some thing was missing. So that's what I am going to describe here. How to use Ext.Direct with Form Panel.

When using Ext.Direct with Form panel following two extra things you need to add in Form Panel.

{

xtype : 'form',
defaultType : 'textfield',
labelWidth : 70,
frame : true,
labelAlign : 'right',
defaults : formItemDefaults,

api: {                        
                submit: Uniframe.Login.do_login
       },    
paramOrder: ['user_name', 'user_password']
}

Following should be your class definition.


class Login{
        /**
         * @remotable
         * @formHandler
         */
     public function do_login($user_credentials){
        }
}

Here @remotable means method is remotely available and @formHandler means this is method which is going to be called on form submit. All the post parameters you will get in an Array. For example above user_name and user_password can be accessed as follow.

$user_credentials['user_name'];
$user_credentials['user_passsword'];

So this is how you can use Ext.Direct with ExtJs Form Panel submit.

1 comment:

  1. Hai, i'm a newbie in ext js and ext direct. i'm doing a simple project that needs CRUD operations.
    I use ext direct for calling the server-side method. but i got a problem.
    Here my simple code. when i run it, error in firebug is
    "too much recursion" ext-all-debug.js (line 4238}else if(Ext.isArray(o)){

    please help me...

    var phonebookStore = new Ext.data.DirectStore({
    storeId: 'Phonebook',
    api: {
    read: Example.Phonebook.get
    },
    paramsAsHash: false,

    reader: new Ext.data.JsonReader({
    fields: ['nik','id_level'],
    root: 'data',
    }),
    });

    panel1 = new Ext.grid.GridPanel({
    title:'Movies',
    store:phonebookStore,
    columns:[
    {header:"NIK", width:30, dataIndex:'nik'},
    {header:"ID_LEVEL", width:180,dataIndex:'id_level'}],
    });

    Ext.onReady(function(){

    new Ext.Viewport({
    layout: 'border',
    items: [
    {
    region:'north',
    xtype:'box',
    el:'header',
    hight:100,
    },

    {
    region: 'west',
    xtype: 'treepanel',
    id: 'sms-tree',
    split: true,
    collapsible: false,
    collapseMode: 'mini',
    title: 'Menu',
    bodyStyle:'padding:5px;',
    width: 200,
    minSize: 200,
    autoScroll:true,
    animate:true,
    enableDD:true,
    containerScroll:true,
    dataUrl: './resources/php/tree-nodes.php',
    root:{
    nodeType: 'async',
    text: 'SMS',
    draggable: false,
    id: 'mailbox'
    }
    },

    {
    region: 'center',
    border:'false',
    layout:'fit',
    xtype: 'panel',
    items: [panel1]
    }
    ]
    });

    phonebookStore.load({
    params:{start:0, limit:20}})

    Ext.getCmp('sms-tree').getRootNode().expand();

    });


    The error happened when i called the "phonebookStore.load({params:{start:0, limit:20}})"

    What's wrong?

    ReplyDelete