can give working example of extjs editorgridpanel fetching data php , found example didnt work me
i tried , this, wrong
my html
<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>json grid example</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <link rel="stylesheet" type="text/css" href="examples/grid/grid-examples.css" /> <script type="text/javascript" src="extjson-grid.js"></script> <h1>json grid example</h1> <p>this example shows how load grid json data.</p> <div id="example-grid"></div> </head> </html> my js
ext.onready(function(){ var proxy=new ext.data.httpproxy({url:'connectextjs.php'}); var reader=new ext.data.jsonreader( [{name: 'employee_id', mapping: 'employee_id'}, {name: 'department_id'}, {name: 'name'}, {name: 'email'}] var store = new ext.data.store({proxy:proxy,reader:reader}); store.load(); create grid var grid = new ext.grid.gridpanel({ store: store, columns: [ {header: "employee_id", width: 90, dataindex: 'employee_id', sortable: true}, {header: "department_id", width: 90, dataindex: 'department_id', sortable: true}, {header: "name", width: 90, dataindex: 'name', sortable: true}, {header: "email", width: 200, dataindex: 'email', sortable: true}], renderto:'example-grid', width:540, height:200 }); }); my php code
<?php // make mysql connection mysql_connect("localhost", "root", "password") or die(mysql_error()); mysql_select_db("test") or die(mysql_error()); // retrieve data "employee" table $result = mysql_query("select * employees") or die(mysql_error()); $row = mysql_fetch_assoc($result); // data , store in json array $query ="select employee_id,department_id,name,email employees"; while ($row = mysql_fetch_array($result, mysql_assoc)) { $myinventory[] = array( 'employee_id' => $row['employee_id'], 'department_id' => $row['department_id'], 'name' => $row['name'], 'email' => $row['email'] ; } $mydata = $myinventory; echo json_encode($mydata); ?>
assuming have output php
a sample json data:
{ "data": [ { "employee_id": 1, "department_id": 1, "name": "abhishek jaiswal", "email": "ajaiswal@mail.com" }, { "employee_id": 2, "department_id": 1, "name": "john doe", "email": "jdoe@mail.com" }, { "employee_id": 3, "department_id": 2, "name": "darick pascua", "email": "dpascua@mail.com" } ] } to generate sample json data use code snippet: records.php
$employeerecords["data"] = array( array( "employee_id" => 1, "department_id" => 1, "name" => "abhishek jaiswal", "email" => "ajaiswal@mail.com" ), array( "employee_id" => 2, "department_id" => 1, "name" => "john doe", "email" => "jdoe@mail.com" ), array( "employee_id" => 3, "department_id" => 2, "name" => "darick pascua", "email" => "dpascua@mail.com" ), ); echo json_encode($employeerecords); your html, using cdn sencha:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>http://stackoverflow.com/questions/17597001/simple-extjs-gridpanel-implementation-with-php</title> <script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script> <script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-theme-neptune.js"></script> <link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css"> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html> and app.js, i've added comments you:
/** * store here */ var employeerecords = ext.create('ext.data.store', { autoload : true, //autoload set true unless want load manually fields:['employee_id', 'department_id', 'name', 'email'], //set model proxy: { type: 'ajax', url : 'records.php', //actual data coming database reader: { type: 'json', //the type of reader root: 'data' //we set our root here } } }); ext.application({ name: 'simple extjs grid', //application name launch: function() { ext.create('ext.container.viewport', { layout: 'fit', //we stretch our datagrid items: [ { xtype: 'gridpanel', //our grid panel title: 'json sample data', store: employeerecords, columns: [ { xtype: 'numbercolumn', flex: 1, dataindex: 'employee_id', header: 'employee id' }, { flex: 1, dataindex: 'department_id', header: 'department id' }, { flex: 1, dataindex: 'name', header: 'name' }, { flex: 1, dataindex: 'email', header: 'email' }, ], listeners: { //after render event listener afterrender: function() { alert("datagrid ftw!"); } } } ] }); } }); 
Comments
Post a Comment