I'm trying to connect ExtJs to PHP with database and I'm having a trouble to show a data to the gridpanel

Question

I'm trying to connect ExtJs to PHP with database and I having a trouble to show a data to the gridpanel, I'm confused why no data show in gridpanel and there's no error in firebug. Anyone can check and correct me or teach how to achieve to create a simple gridpanel with PHP. I'm using Extjs 5

//app/store/

Ext.define('TestPhp.store.Employee', {
      extend: 'Ext.data.JsonStore',
      alias: 'store.employees',
      model: 'TestPhp.model.Employ',
    proxy: {
        type: 'ajax',
        url: 'test.php',
        reader: {
            type: 'json',
            rootPropety: 'data'
        }
    },   });

//app/model/

Ext.define('TestPhp.model.Employ', {
     extend: 'Ext.data.Model',
    fields: ['name','bounty','power'],    
});

//app/view/main/

 Ext.define('TestPhp.view.main.Grid', {
    extend: 'Ext.Panel',
    xtype: 'gridp',

require:['TestPhp.store.Employee'],

    store: 'Employee',
 items:[{
            style: 'padding-top: 10px;',
            xtype: 'grid',
            style: 'margin-top:5px;margin-left:10px;',
            columns : [

                {
                text     : 'Name',
                width    : '40%',
                sortable : false,
                dataIndex: 'name'
            },
            {
                text     : 'Bounty',
                width    : '30%',
                sortable : true,
                dataIndex: 'bounty'
            },
            {
                text     : 'Power',
                width    : '30%',
                sortable : true,
                dataIndex: 'power'
            }

            ],

            width: '100%'
        }],
  });

//my php file

<?php

 mysql_connect("localhost", "root", "") or
  die("Could not connect: " . mysql_error());
  mysql_select_db("test_db");

$query= "SELECT * FROM pirate";
$result= mysql_query($query);

    $return_arr= array();

    while($rows = mysql_fetch_array($result, MYSQL_ASSOC)){
            // $row_array['id']=$rows['id'];
            $row_array['name']=$rows['name'];
            $row_array['bounty']=$rows['bounty'];
            $row_array['power']=$rows['power'];

            array_push($return_arr, $row_array);
}

$ans = array('success' => true, );
$ans['data'] = $return_arr;
header('Content-Type: application/json');
print json_encode($ans);
exit;

?>

this is the output of php file.....

{"success":true,"data":[{"name":"luffy","bounty":"400000000","power":"gum gum no mi and haki"},{"name":"zorro","bounty":"300000000","power":"3 swords style and haki"},{"name":"sanji","bounty":"100000000","power":"black foot style and haki"},{"name":"Ace","bounty":"400000000","power":"flare flare no mi and haki"},{"name":"sabo","bounty":"40000000000","power":"unknown"},{"name":"rayleigh","bounty":"unknown","power":"unknown"}]}

Answer 1

Evan's answer with code : replace

extend: 'Ext.Panel',

by

extend: 'Ext.grid.Panel',

Then, either add autoLoad: true to the store or load the store before creating the grid. Adapt this code to your use case :

this.getStore('Employee').load()
Ext.widget('gridp')