Row Expander with ExtJS (Account with list of contacts)

Here in this example we are showing all the accounts when we click on Account row then we are showing

related Contacts under the account.It is implemented in  ExtJs

Controller (class):
=============
global class rowExpanderCls {

    public PageReference fetch() {
        lstcon=[Select id, name, phone from contact where accountId=:recordId];
        System.debug('------------lstcon-------------------'+lstcon);
     
        return null;
    }

        @RemoteAction
        global static String getUserData(String recordId){
            List<Contact> lstcon=[Select id, name, phone from contact where accountId=:recordId];
            System.debug('------------lstcon-------------------'+lstcon);
            String JSONString = JSON.serialize(lstcon);
            //Depends on your needs and way you want to format your result. Lets just hardcode the status value for now.
            return '{"Records":' +JSONString+', "error": "null", "status":"SUCCESS"}';
         }
       
       
         @RemoteAction
        global static String check(){
            return 'hello';
        }
// public List<Contact> lstcon;
 public string recordId{get; set;}

@RemoteAction
global static String getContacts(string id){
    System.debug('---------->'+id);
    return id;
}

public List<Contact> lstcon{get; set;}

 public class wrapper{
   
     public boolean has_leaf{get; set;}
     public Account acc{get; set;}
   
     public wrapper(boolean b, Account a){
         has_leaf = b;
         acc= a;
     }

 }

 public List<wrapper> lstwrap{get; set;}
 public rowExpanderCls(){
         recordId='';
         lstcon = new List<Contact>();
         List<Account> lst =[Select id,name, phone ,(Select id, name from Contacts) from Account];
         lstwrap = new List<wrapper>();
         lstcon = [Select id, name, phone from contact];
         for(Account a:lst){
             if(a.contacts.size()>0)
             lstwrap.add(new wrapper(false, a));
             else
             lstwrap.add(new wrapper(true, a));
         }
 }

}


Page:
=====
<apex:page controller="rowExpanderCls" sidebar="false" >
    <apex:includeScript value="{!$Resource.Extjs4Vf}/ext-3.0.0/adapter/ext/ext-base.js"/>
    <apex:includeScript value="{!$Resource.Extjs4Vf}/ext-3.0.0/ext-all.js"/>
    <apex:includeScript value="{!$Resource.Rowexpandar}"/>
    <apex:stylesheet value="{!$Resource.Extjs4Vf}/ext-3.0.0/resources/css/ext-all.css"/>

    <script type="text/javascript">
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.onReady( function() {
       //Ext.Msg.alert('hi');
       //alert('{!lstwrap}');
    var data = [
        <apex:repeat value="{!lstwrap}" var="w">
            ['{!w.acc.name}','{!w.acc.phone}','{!w.has_leaf}','{!w.acc.id}'],
        </apex:repeat>
    ];
     
    var secondData =[
     
    ]  
    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    };

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
        function pctChange( val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        };

        var firststore = new Ext.data.ArrayStore({
            fields: [
                { name: 'Company' },
                { name: 'Phone', type: 'string'},
                { name: 'is_leaf', type: 'bool' },
                { name: 'Id', type: 'string' }
            ],
            data: data
        });
       
     
        var secondstore = new Ext.data.JsonStore({
            fields: [
                        {name: 'Id'},
                        {name: 'Name', type: 'string'},
                        {name: 'Phone', type: 'string'}
            ],
            data: secondData,
            type: 'json'
         
        });
   var oldIndex = 0;
   var getGrid = function( data, store, element, type) {
     
        var expander = new Ext.ux.grid.RowExpander({
            tpl              : '<div class="ux-row-expander-box"></div>',
            actAsTree        : true,
            treeLeafProperty : 'is_leaf',
           
            listeners        : {
                 beforeExpand: function(record, body, rowIndex){
                    //alert('hi');
                    //alert(rowIndex);
                    //alert(record);
                    //alert(body);
                    //alert(oldIndex);
                  //alert(Ext.fly(rowIndex).hasClass(this.rowCollapsedClass));
                  //alert(Ext.fly(rowIndex));
                  expander.collapseRow(oldIndex);
                  //for(i = 0; i <= grid.getStore().getCount(); i++) {
                  //    expander.collapseRow(i);
                  //}
                   
                 
                   
                 },  
                expand : function( expander, record, body, rowIndex) {
                   //alert(rowIndex)
                   secondstore.removeAll();
                   var recId = grid.getStore().getAt(rowIndex).get('Id');
                   rowExpanderCls.getUserData(recId,function(result, er){ //This method is used to call our controller method
                   var res = Ext.decode(result);
                   secondstore.loadData(res.Records);
                   }, {escape:false});
                 
                   getGrid1(secondData,secondstore,Ext.get(this.grid.getView().getRow(rowIndex)).child('.ux-row-expander-box'));                
                   oldIndex = rowIndex;
                },
                 collapse: function( expander, record, body, rowIndex) {
                     //alert(rowIndex);
                 }
               
               
            }
        });
       
             
        var grid = new Ext.grid.GridPanel({
            id: 'parentgrid',
            store: store,
            columns: [
                expander,
                { id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'Company'},
                {header: 'Phone', width: 150, sortable: true, dataIndex: 'Phone'},
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            autoHeight: true,
            border: false,
            width: '100%',
            stateful: false,
            stateId: 'grid',
            listeners: {
                headerclick: function(g, index, ev) {
                    alert('Hi');
                    rowExpanderCls.check(function(result, er){ //This method is used to call our controller method
                    alert(result);
                    }, {escape:false});
                }
            },
            plugins: expander
        });
        element && grid.render( element);
        return grid;
    };
   
     var getGrid1 = function( data, store, element) {
       //alert('called');
       //alert(store);
     
     
       var grid = new Ext.grid.GridPanel({
             id: 'childgrid',
            store: store,
            columns: [
                { id:'name',header: 'Name', width: 150, sortable: true, dataIndex: 'Name' },
                { header: 'Phone', width: 150, sortable: true , dataIndex: 'Phone' },
            ],
            stripeRows: true,
            autoExpandColumn: 'name',
            autoHeight: true,
            border: false,
            width: '100%',
            stateful: true,
            stateId: 'grid',
         
        });
        element && grid.render( element);
        return grid;
    };

    var panel = new Ext.Panel({
        title      : "Nested Grids Example",
        autoHeight : true,
        items      : [getGrid(data,firststore)],
        applyTo    : 'grid-box'
    });

});
    </script>
    <apex:form id="form" >
   
    <div id="grid-box"></div>  
    </apex:form>
</apex:page>

output:
=====