function createCircViewGrid(){			
<%if (circViewListJson.length()>3) {%>
				Ext.grid.RowExpander = function(config){
    				Ext.apply(this, config);
    				Ext.grid.RowExpander.superclass.constructor.call(this);
    				this.state = {};
				    this.addEvents({
				        beforeexpand : true,
				        expand: true,
				        beforecollapse: true,
				        collapse: true
				    });
			};			
			var childData='';
Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
    header: "",
    width: 20,
    sortable: false,
    fixed:true,
    dataIndex: '',
    id: 'expander',
    lazyRender : true,
    enableCaching: true,

    getRowClass : function(record, rowIndex, rowParams, ds){
        // cols: The column count to apply to the body row's TD colspan attribute (defaults to the current column count of the grid).
        rowParams.cols = rowParams.cols-1; // make it the width of the whole row
        //return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
        var cls="";
         if(record.data.isXConnectPort == 'true')
        	cls= 'green-row';
         else if (record.data.isXConnectPort !== 'PORT')
         	cls= 'white-row';
         else if(this.state[record.id]  && record.data.isXConnectPort == 'PORT')
        	cls= 'x-grid3-row-expanded'
        else
        	cls= '';
        return cls;	 		
    },

    init : function(grid){
        this.grid = grid;

        var view = grid.getView();
        view.getRowClass = this.getRowClass.createDelegate(this);

        view.enableRowBody = true;

        grid.on('render', function(){
            view.mainBody.on( 'mousedown', this.onMouseDown, this );
        }, this);
        
        // store
        grid.getStore().on("load", function(store, records, options){
            Ext.select('div.x-grid3-row-expanded').replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.state = {};
            }, this);
            
        if (this.store){
            this.store.load(); // load here instead of in beforeExpand cuz that would wipe out additions to store
        }
    },

    onMouseDown : function( e, t ) {
        if(t.className == 'x-grid3-row-expander'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            this.toggleRow(row);
        }
    },

    renderer : function(v, p, record){
        p.cellAttr = 'rowspan="2"';
        if (record.data.hasChildren == "false"){//====>change this to render "blank" while there is no sub content.
            return null;
        }
        return '<div class="x-grid3-row-expander"> </div>';
    },

    beforeExpand : function(record, rowBody, rowIndex){
        var isContinue = true;
        if(this.fireEvent('beforeexpand', this, record, rowBody, rowIndex, this.store) !== false){
            if(rowBody.innerHTML == '' || !this.enableCaching) {
                this.createExpandingRowPanel( record, rowBody, rowIndex );
            }
        } else {
            isContinue = false;
        }
       
	    return isContinue;
    },

    toggleRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
    },

    expandRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        // if using additional store passed in config, pass record from it instead of from the grid store
        var recordToPass = this.store ? this.store.getAt(row.rowIndex) : record; 
        var rowBody = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
        if(this.beforeExpand(recordToPass, rowBody, row.rowIndex)){
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
            this.fireEvent('expand', this, recordToPass, rowBody, row.rowIndex);
        } 
        //generateGrid();
    },

    collapseRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        // if using additional store passed in config, pass record from it instead of from the grid store
        var recordToPass = this.store ? this.store.getAt(row.rowIndex) : record; 
        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
        if(this.fireEvent('beforcollapse', this, recordToPass, body, row.rowIndex) !== false){
            this.state[record.id] = false;
            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.fireEvent('collapse', this, recordToPass, body, row.rowIndex);
        }
    },
    
   createExpandingRowPanel: function( record, rowBody, rowIndex ) {
    	
        // record.id is more stable than rowIndex for panel item's key; rows can be deleted.
        var panelItemIndex = record.id;
        // var panelItemIndex = rowIndex;
        // init array of expanding row panels if not already inited
        if ( !this.expandingRowPanel ) {
            this.expandingRowPanel = [];
        }
        // Add a new panel to the row body if not already there
        if ( !this.expandingRowPanel[panelItemIndex] ) {
            this.expandingRowPanel[panelItemIndex] = new Ext.Panel(
                {
                    // title: 'Custom Fields',
                    // layout:'fit', // this doesn't put the labels there
                    border: false,
                    bodyBorder: false,
                    layout:'form',
                    //autoScroll: true,
                    renderTo: rowBody,
                    items: this.createExpandingRowPanelItems( record, rowIndex)
                }
            );
        }
    },
    
    /**
    * Override this method to put Ext form items into the expanding row panel.
    * @return Array of panel items.
    */
    createExpandingRowPanelItems: function( record, rowIndex) {
        var panelItems = [];
        //alert("Inside createExpandingRowPanelItems");
        return panelItems;
    }
    
});





function genSubGrid(record, rowIndex){

	 var i=0;
     var size=cktPathData.length;
     childData='';
     while(size>0){
	    	if(cktPathData[i].indexOf(record.get('stringToCheck'))>-1){
	    		childData+=cktPathData[i]+',';
	    	}
	    	i++;
	    size--;
    }    
   if(childData.length>0)
    	childData = '['+childData.substring(0,childData.length-1)+']';
   else
	childData = '[]';

    childData = eval(childData);

	//alert("Child data="+childData);
			
        var ts = new Ext.data.SimpleStore({
			fields:['Detail','Type','ASite','ZSite','Sequence','Entity','Object','Channel','Addtnl Details','Bandwidth','Phone','RevNum','stringToCheck','childColor','isXConnectPort'],
	    	data : childData
    	});
        
        var fm = Ext.form;

        
        var subGrid = new Ext.grid.GridPanel({
            store: ts,
            region: 'center',
            //width:'auto',
            //autoHeight: true,
            //height: 100,
            autoScroll: true,
            autoShow :true,
            enableHdMenu: true,
            //autoWidth:true,
            width : fwidth,
            //autoExpandColumn:'id',
            columns:[
				
                {header:'Type',dataIndex:'Type',width:fwidth*.07,height:40,hidden:true,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},
                {header:'ASite',dataIndex:'ASite',width:fwidth*.18,height:40,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},
                {header:'ZSite',dataIndex:'ZSite',width:fwidth*.18,height:40,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},
				{header:'Seq',dataIndex:'Sequence',width:fwidth*0.05,height:40,hidden:true,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},
                {header:'Entity',dataIndex:'Entity',width:fwidth*.18,height:40,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},                    
                {header:'Object',dataIndex:'Object',width:fwidth*.20,height:40,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},     
				{header:'Channel',dataIndex:'Channel',width:fwidth*.10,height:40,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},                                                    
                {header:'Addtnl Details',dataIndex:'Addtnl Details',width:fwidth*.25 ,height:40,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},                    
                {header:'BW',dataIndex:'Bandwidth',width:fwidth*.07,height:40,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })},
                {header:'Global Phone Number',dataIndex:'Phone',width:fwidth*.15,height:40,hidden: true,
                    editor:new fm.TextField({
                                         allowBlank: false
                                    })}
            ],
            listeners: {
                'mousedown': function(e){
                    e.stopEvent();
                }
                ,'mouseover': function(e){
                    e.stopEvent();
                }
            }
        });
        return [subGrid];
    };
	var expander = new Ext.grid.RowExpander({
        id: 'expander',
        createExpandingRowPanelItems: genSubGrid
        //alert("expander called");
    });	
    
    var mainGridData = eval(circViewListJson);
    var es = new Ext.data.SimpleStore({
        fields: ['Detail','TypeMain','ASiteMain','ZSiteMain','SequenceMain','Entity','Object','Channel','Addtnl Detail','Bandwidth','Phone','RevNum','stringToCheck','parentColor','hasChildren','isXConnectPort'],
        data : mainGridData
    	});
 
 
		
	//var pagingBarTop = new Ext.Toolbar();				
	var pagingBarTop=new Ext.PagingToolbar({
						        pageSize: 1000, 
						        store: es,
						        displayInfo: true,
						        displayMsg: 'Displaying rows {0} - {1} of {2}',
						        emptyMsg: "No rows to display"
						});
    circuitViewGrid = new Ext.grid.GridPanel({
          id:'tree_grid',
          renderTo : 'id-test',
          store: es,
          border:true,
          autoScroll:true,
          //enableColumnMove:false,
          enableHdMenu: true,
          //height : 200,
          //autoHeight : true,
          tbar: pagingBarTop,
          //autoWidth : true,
          //height : gridPanelHeight*0.97,
          //width : document.body.clientWidth*0.97,
          //loadMask : true,
          stripeRows: true,
          plugins: [expander],
          //master_column_id : 'common',
          columns : [expander,
            
             {
                header : 'Type',
                dataIndex : 'TypeMain',
                width : fwidth*.10,
                hidden:false
            }, {
                header : 'ASite',
                dataIndex : 'ASiteMain',
                width : fwidth*.18,
                hidden:false
            }, {
                header : 'ZSite',
                dataIndex : 'ZSiteMain',
                width : fwidth*.18,
                hidden:false
            }, {
                header : 'Seq',
                dataIndex : 'SequenceMain',
                width : fwidth*.05,
                hidden:false
            }, {
                header : 'Entity',
                dataIndex : 'Entity',
                width : fwidth*.18,
                hidden:false
            },{
                header : 'Object',
                dataIndex : 'Object',
                width : fwidth*.20,
                hidden:false
            }, {
                header : 'Channel',
                dataIndex : 'Channel',
                width : fwidth*.10,
                hidden:false
            },{
                header : 'Addtnl Detail',
                dataIndex : 'Addtnl Detail',
                width : fwidth*.25,
                hidden:false
            },{
                header : 'BW',
                dataIndex : 'Bandwidth',
                width : fwidth*.07,
                hidden:false
            }, {
                header : 'Global Phone Number',
                dataIndex : 'Phone',
                width : fwidth*.15,
                hidden:true
            }
            ]
    });