PDA

View Full Version : ExtJS Load Data on Ajax return (json) and load store for grid.panel



Claudemir Feliciano
21 Jan 2014, 12:15 PM
The code below works normally Loading data MyData variable, but need to get the data that comes from page in php and click on store feed the grid. in my page php, it generate a code json, and ajax save its in variable data, in alert (javascript) it show information.
Since now, thanks;





pdvs : function () {
$(document).ready(function () { $.ajax({ url : "relpontovendaper.php", dataType : "json", success : function (data) { alert(data[1].nome); } });}); // return php [ { "nome": "Claudemir", "sobrenome": "Feliciano" }, { "nome": "Mario Borges" , "sobrenome": "Juno" } ] var store = new Ext.data.JsonStore({ fields : ['name', 'area'] });//This is Load.var myData = [['Maria', 'santos'], ['Lucas', 'pereira'], ['Mariana', 'fagundes']];var store = new Ext.data.SimpleStore({ fields : [ 'nome', 'sobrenome' ] });// this load in gridstore.loadData(myData);//this dont load in grid - informations of ajax in format jsonstore.loadData(data);Ext.getCmp("_relpontoperiodo_grid").getStore().loadData(myData); } //This is a item (window) items : [{ xtype : "grid", id : "_relpontoperiodo_grid", height : 230, width : 200, store : new Ext.data.SimpleStore({ fields : [ 'nome', 'sobrenome' ] }), columns : [{ header : "PDV_COD", sortable : true, dataIndex : 'nome' }, { header : "PDV_DESCRIÇÃO", sortable : true, dataIndex : 'sobrenome', flex : 1 } ] } ]

scottmartin
28 Jan 2014, 12:17 PM
Can you clarify your question a bit?

Do you need to know how to return the array as json in PHP, or how to get the return json into the store so it is seen in the grid?

Here is a quick example with paging as well.



<?php

$start = $_GET['start'];
$limit = $_GET['limit'];
$name = $_GET['name'] . '_';
$total = $_GET['total'];

for ($i = 0; $i < $limit; $i++) {
$record_num = $i + $start;

$id = $name . $record_num;
$arr[] = "{ name: '$id', email: '$id@extjs.com', phone: '555-111-1224 x$record_num' }";
}

echo "{ success: true, total: $total, rows: [" . join($arr, ', ') . "] }";

?>




Ext.onReady(function() {
var itemsPerPage = 5,
name = 'Sencha',
total = 200; // records to return

var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],

autoLoad: true,
pageSize: itemsPerPage,

proxy: {
type: 'ajax',
url: 'pagingstore.php',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
},
extraParams: {
name: name,
total: total
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Test Grid',
store: store,
columns: [
{
header: 'Name',
dataIndex: 'name',
flex: 1
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Phone',
dataIndex: 'phone',
flex: 1
}],
width: 400,
height: 200,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});