Having some trouble reading JSON response - servlets

I make an ajax request to the servlet that returns the result of a database query.
I can see with firebug the response and I want to put these results in a list (or other..) that I have already created.
I tried to read this post but it didn't help me..
Code:
this is the ajax request:
Ext.Ajax.request({
url: '/VIProject/Container',
success: function (action){alert('Lista caricata!'); console.debug(action); },
failure: function (){alert('Errore nel caricamento...');},
headers: {
'my-header': 'foo'
},
params: { action: "GETCONTAINERLIST" }
});
response from servlet(firebug):
{"message":"OK","container":[{"idOrdine":"1","numLotto":"123"},{"idOrdine":"2","numLotto":"321"},{"idOrdine":"3","numLotto":"876"}],"success":true}
list:
var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
id: 'lista',
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
store: //???
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'idOrdine',
flex: 15,
sortable: true,
dataIndex: 'idOrdine'
},{
text: 'Last Modified',
flex: 20,
sortable: true,
dataIndex: 'numLotto'
}]
});
How can I do?

I've modified your code to use a store:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['idOrdine', 'numLotto']
})
var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
id: 'lista',
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
store: store: {
model: MyModel,
autoLoad: true,
proxy: {
type: 'ajax',
url: '/VIProject/Container',
reader: {
type: 'json',
root: 'container'
}
}
},
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'idOrdine',
flex: 15,
sortable: true,
dataIndex: 'idOrdine'
},{
text: 'Last Modified',
flex: 20,
sortable: true,
dataIndex: 'numLotto'
}]
});

Even in this way it works:
var proxy=new Ext.data.HttpProxy({url:'/VIProject/Container'});
var reader=new Ext.data.JsonReader({},[
{name: 'idOrdine', mapping: 'idOrdine'},
{name: 'numLotto', mapping: 'numLotto'}
]);
var store=new Ext.data.Store( {
proxy:proxy,
reader:reader
});
store.load();
I tried in every way.. but i don't know what to do!

Related

EXTJS 5.0: Infinite Grid scrolling not working with extraParams in store

I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records.
I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this?
My store looks as follows ->
Ext.define('MyStore', {
// extend: 'Ext.data.BufferedStore',
extend: 'Ext.data.Store',
model : 'MyModel',
remoteSort: true,
buffered: true,
leadingBufferZone: 10,
trailingBufferZone: 10,
pageSize: 100,
proxy: {
type : 'rest',
format: 'json',
url : '/myApp/list',
extraParams: {
fromDate: '',
toDate: ''
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'totalCount'
}
}
});
My Grid looks as follows-->
Ext.define('MyGridl', {
extend: 'Ext.grid.Panel',
requires: [
'MyStore'
],
layout: 'fit',
loadMask: true,
viewConfig: {
preserveScrollOnRefresh: true
},
initComponent: function() {
this.id = 'myGrid';
this.store = new MyStore();
this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
text: 'Column1',
dataIndex: 'Col1',
flex: 1
},{
text: 'Column2',
dataIndex: 'Col2',
flex: 1
}
],
plugins: [
{
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10,
scrollToLoadBuffer: 10
}
],
tbar: {
items: [{
xtype : 'datefield',
id : 'fromDate',
emptyText: 'Enter From Date',
listeners : {
render : function(datefield) {
datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
}
}
},{
xtype : 'datefield',
id : 'toDate',
emptyText: 'Enter To Date',
listeners : {
render : function(datefield) {
datefield.setValue(new Date());
}
}
},{
xtype: 'button',
text: 'Filter by Date',
style: {
marginLeft: '15px'
},
scope: this,
handler: function(me){
var store = Ext.getStore('myStore'),
fromDay = me.up().down('#fromDate').getValue(),
toDay = me.up().down('#toDate').getValue();
store.removeAll();
store.load({
params:{
fromDate: fromDay,
toDate: toDay
}
});
}
}
]
}
});
I fixed this issue by adding
store.removeAll();
store.currentPage = 1;
store.getProxy().setExtraParam("fromDate", fromDay);
store.getProxy().setExtraParam("toDate", toDay);
store.load();

Extjs store don't fill grid lines

You can see my code about grid.
Here, Window opens but there is not any value in my grid.
Could you please help?
My php returns JSON encode blow:
{"results":3,"disPath":"","success":"true","rows":[{"id":"1","faz":"Faz1"},{"id":"2","faz":"Faz2"},{"id":"3","faz":"Faz3"}]}
Code
Ext.define('MyDesktop.GridFazlar', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
id:'grid-fazlar',
init : function(){
this.launcher = {
text: 'Fazlar',
iconCls:'icon-grid'
};
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-fazlar');
if(!win){
var fazlarGridStore = new Ext.data.JsonStore({
root: 'rows',
autoLoad: true,
totalProperty: 'results',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
}),
baseParams:{
depth: '2',
parentId: '2',
proccess: 'callGrid',
},
fields: [{
name :'id'
},{
name :'faz'
},
//{
]
});
win = desktop.createWindow({
id: 'grid-fazlar',
title:'Fazlar',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
listeners:{
beforeshow: function(){
fazlarGridStore.proxy.extraParams = {
depth: '2',
parentId: '2',
proccess: 'callGrid',
};
}
},
items: [
{
border: false,
xtype: 'grid',
listeners: {
celldblclick : function() {
alert('Deneme');
},
},
contextMenu: new Ext.menu.Menu({
items:[
{
id:'grid-fazlar_menu_denemebutton',
text: 'DenemeButonu',
listeners: {
click: function(){
alert('sssss');
}
}
}
]
}),
store:fazlarGridStore,
columns: [
new Ext.grid.RowNumberer(),
{
text: "ID",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'id'
},{
text: "Faz",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'faz'
},
]
}
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Modify options',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
return win;
},
statics: {
getDummyData: function () {
return [
['Faz1','06/06/2011','15/08/2010','19/12/2010'],
['Faz2','01/10/2010','15/11/2010','29/11/2011'],
['Faz3','16/11/2010','16/12/2010','14/02/2011'],
['Faz4','19/03/2011','20/03/2011','18/06/2011'],
['Faz5','21/03/2011','20/05/2011','18/08/2011'],
['Faz6','21/05/2011','05/07/2011','18/09/2011'],
['Faz7','06/07/2011','04/09/2011','06/12/2011'],
['Faz8','30/09/2011','30/10/2011','29/12/2011'],
];
}
}
});
Your Json has a custom root : 'rows'. You must configure your datareader to take this into account:
proxy: {
type: 'ajax',
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'rows'
}
},

How to perform custom paging in Ext Grid

I have following Ext Grid,
Ext.onReady(function () {
var dataStore = new Ext.data.JsonStore({
proxy: {
type: 'ajax',
url: 'Default.aspx/CustomerData', //'web.aspx',
headers: { 'Content-type': 'application/json' },
reader: {
type: 'json',
root: 'd',
totalProperty: 'totalCount'
}
},
fields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'age', type: 'string' },
{ name: 'phone', type: 'string' }
],
pageSize: 10
});
dataStore.load({ params: { start: 0, limit: 25} });
var myGrid1 = new Ext.grid.GridPanel({
id: 'customerslist',
store: dataStore,
columns: [
{ id: "firstname", header: "First Name", width: 100, dataIndex: "firstname", sortable: true },
{ header: "Last Name", width: 100, dataIndex: "lastname", sortable: true },
{ header: "Age", width: 100, dataIndex: "age", sortable: true },
{ header: "Phone", width: 100, dataIndex: "phone", sortable: true }
],
autoLoad: false,
stripeRows: true,
autoHeight: true,
width: 450,
height: 300,
dockedItems: [{
xtype: 'pagingtoolbar',
store: dataStore,
dock: 'bottom',
displayInfo: true
}],
renderTo: 'grid1'
});
});
I have following server side code for custom paging,
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public static List<tblCustomerList> CustomerData(int rowSize, int pageNumber)
{
DataGridEntities _dbContext = new DataGridEntities();
//Code for custom paging
Customer customer = new Customer();
customer.TotalRecords = //code for total record count
customer.Details = //fetch record based on page number and page size
return customer.Details;
}
}
How can I achieve custom Paging in this.
Paging is done with start and limit per default. And if you don't want to rewrite the whole chain I recommend you to leave it as it is an simply add two more params, in your case
dataStore.load({
params: {
rowSize: dataStore.pageSize,
pagenNumber: dataStore.currentPage || 1
}
});
In addition you will need either a custom paging navigation, a customized version of the paging toolbar or a beforeload eventhandler like this:
function(store,operation,eo){
operation.params: {
rowSize: store.pageSize,
pagenNumber: store.currentPage +1 // I assume that this was not updated before a successful load
}
}
This is untested and should show you how it can be done.

kendogrid batch edit appending row causes to post data

This code populates datagrid with json formated data received from /api/notes/ by tornado app...
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
pageSize: 10,
autoSync: true,
transport: {
read: {
url: '/api/notes/',
dataType: 'json',
type: 'GET'
},
create: {
url: '/api/notes/',
dataType: 'json',
type: 'POST'
},
update: {
url: '/api/notes/',
dataType: 'json',
type: 'PUT'
}
},
schema: {
data: function(reply) { return reply.rows; },
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
author: { type: "string" },
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
editable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: 150 },
{ field: "name", title: "Book", width: 150 },
{ field: "author", title: "Author", width: 100 },
{ command: "destroy", title: " ", width: 110 }
],
});
});
if I click create instead of popping up a row, like here a post triggered with empty data parameter, what's wrong here
Try it with autoSync removed or set to false on the DataSource. According to the docs:
Enables (true) or disables (false) the automatic invocation of the sync() method for each change made.
So I think when you try to insert the row, it immediately puts it into the DataSource, causing it to do a sync(). The demo you linked to doesn't specify autoSync either.

ExtJS reloading store on button click event with different parameter

I am new to ExtJs and I am using ExtJs4.
Now As shown in below image, There is one textfield named keywords, What I want to do is When I click on the button it will pass data of textfield to servlet and display resulted record in grid.
Now I have no idea how to do this. I am receiving JSON data response from servlet but don't know how to reload the store and refresh the grid.
Below is code for my store and grid.
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
};
}
});
You could use:
{
xtype: 'button',
text: 'Search',
handler: function() {
store.clearFilter(); //clear previous search value
var searchValue = Ext.getCmp("textFieldId").getValue(); //get new value
store.load().filter('jsonGridFielName', searchValue); //load filtered data
}
}
And for for multiple textfield search:
//FILTERS
var searchValue1 = Ext.getCmp("textFieldId1").getValue(); //value1
var searchValue2 = Ext.getCmp("textFieldId2").getValue(); //value2
var noValue = "0000xxxx"; //no Value, for empty field, use value that you are sure it is not going to be searched!!!
var clear = store.clearFilter(); //shortcut
if (!searchValue1 && !searchValue2) {
clear;
store.load().filter("jsonGridFielName1", noValue);
} else if (searchValue1) {
clear;
store.load().filter('jsonGridFielName1', searchValue1);
//...else if(searchValue n...)...
} else {
clear;
store.load().filter('jsonGridFielName2', searchValue2);
}
ezdigrid.js
// Data store for grid start
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'GET',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
// pageSize: 10,
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
//id:'ms',
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
Ezdi.Grid.superclass.initComponent.apply(this, arguments);
// load the store at the latest possible moment
this.on({
afterlayout: {
scope: this,
single: true,
fn: function() {
this.store.load({
params: {
start: 0,
limit: 30
}
});
}
}
});
} // eo function initComponent
});
demo.html
//handler for button click event
fbar: [{
xtype: 'button',
text: 'Search',
handler: function() {
var value = Ext.getCmp('_keyword').getValue(); //_keyword is textField
gridDataStore.load().filter('keywords', value);
}
}]
MyServlet
keyword = request.getParameter("keywords");
//code for quesry processing
Use extraParams in your model.
extraParams: {
keywords: 'your-value'
}
Put following code in your button click handler.
gridDataStore.proxy.extraParams.keywords = 'new value';
gridDataStore.load();

Resources