ExtJs grid only view one row

Question

I have PHP array($test_arr) look like below

Array
(
    [0] => Array
        (
            [INV_ID] => 1
            [INV_TYPE_ID] => CART
            [INV_NO] => CPI0000001
            [INV_DATE] => 17-DEC-12
        )

    [1] => Array
        (
            [INV_ID] => 2
            [INV_TYPE_ID] => CART
            [INV_NO] => CPI0000002
            [INV_DATE] => 17-DEC-12
        )
)

and i have data store for this array

  vertStore = new Ext.data.JsonStore 
  ({
  autoLoad: false,
  mode: 'local',
  data: <?php echo $test_arr; ?>,
  fields: 
  [
     'INV_NO',
     'INV_DATE'
  ]                           
  });

my grid panel

  testPanelUi = Ext.extend(Ext.Panel, {
        width: 400,
        height: 250,
        initComponent: function() {
            this.items = [
                {
                    xtype: 'grid',
                    title: 'ccccc',
                    ref: 'test_ref',
                    id: 'panel_id',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'INV_NO',
                            header: 'INV NO',
                            sortable: true,
                            width: 100,
                            editable: false,
                            id: 'inv_no_id'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'INV_DATE',
                            header: 'Date',
                            sortable: true,
                            width: 100,
                            editable: false,
                            id: 'date_id'
                        }
                    ]
                }
            ];
            testPanelUi.superclass.initComponent.call(this);
        }
    });

Load my store in to the grid

this.test_ref.store = vertStore;

But this gird only view fist data set of the array(index 0 data set in the array and grid only show one row). How can i view all data in the grid.

Answer 1

problem for this grid is not set height inside the 'test_ref' new grid look like below

 testPanelUi = Ext.extend(Ext.Panel, {
    width: 400,
    height: 250,
    initComponent: function() {
        this.items = [
            {
                xtype: 'grid',
                title: 'ccccc',
                ref: 'test_ref',
                height: 400,
                autoHeight: true,
                id: 'panel_id',
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'INV_NO',
                        header: 'INV NO',
                        sortable: true,
                        width: 100,
                        editable: false,
                        id: 'inv_no_id'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'INV_DATE',
                        header: 'Date',
                        sortable: true,
                        width: 100,
                        editable: false,
                        id: 'date_id'
                    }
                ]
            }
        ];
        testPanelUi.superclass.initComponent.call(this);
    }
});