i create a ExtJS tree by loading data dynamically, the js code is below
var treeModel = Ext.define("TreeModel", {
extend : "Ext.data.Model",
fields : [{id: "id", type : "string"},
{name : "text", type : "string"},
{name : "leaf", type : "boolean"}]
});
var store = new Ext.data.TreeStore({
model: 'treeModel',
proxy: {
type: 'ajax',
url: 'listtreecontent.action'
},
root: {
expanded: true
},
reader: {
type: 'JSON',
root: 'array'
},
autoLoad:true
});
var treePanel = new Ext.tree.TreePanel({
title: 'Data management',
width: 500,
height: 300,
renderTo: Ext.getBody(),
useArrows: true,
rootVisible: false,
store: store
});
but it does not show the tree
i can get the response data,
response data
when i write the response data into a json file, and let the url = jsonfile address, it can show the tree, i do not know why?
maybe in the struts2, we should set a param for the action
<action name="listtreecontent" class="org.easygeoc.account.ListTreeContent" method="returnTreeNodes">
<result type="json">
<param name="root">array</param>
<param name="root">js</param>
</result>
</action>
Related
I could not paginate on the grid. I looked through their examples but encountered proxy errors. I share my own code. I will be glad if you help.
I share my codes below
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var grid_data_veri;
var grid_array = [];
$.ajax({
type: 'GET',
url: 'ajaxQueryData?_qid=4146&xirsaliye_dt_k='+baslangic_tarih+'&xirsaliye_dt_b='+bitis_tarih,
data: { get_param: 'value' },
dataType: 'json',
async: false,
success: function (kat, data) {
var kat_sayisi = kat.browseInfo.totalCount;
for(var i_kat = 0; i_kat < kat_sayisi; i_kat++) {
var json = {
"sira_no":sira_no ,
"branch_id":kat.data[i_kat].branch_id_qw_,
"firma": kat.data[i_kat].firma
};
grid_array.push(json);
}
grid_data_veri = JSON.stringify(grid_array);
var store = new Ext.data.JsonStore({
fields: [
{name: "sira_no", type: "int"},
{name: "branch_id"},
{name: "firma"}
]
});
// manually load local data
store.loadData(Ext.decode(grid_data_veri));
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'sira_no',
header : 'Sıra No',
width : 50,
sortable : true,
dataIndex: 'sira_no'
},
{
header : 'Şube',
width :150,
sortable : true,
dataIndex: 'branch_id'
}
,
{
header : 'Firma',
width :250,
sortable : true,
dataIndex: 'firma'
}
],
stripeRows: true,
height:395,
width: 650,
stateful: true,
stateId: 'grid'
});
grid.render('grid');
}
});
I'm trying to populate a kendo grid with data retrieved via ajax. Here is the ajax:
var model = #Html.Raw(Json.Serialize(Model));
$(document).ready(function () {
$.ajax({
url: "/Utilities/Report/Run",
data: JSON.stringify(model),
contentType: "application/json",
type: "POST",
success: function(result) {
var ds = new kendo.data.DataSource({
data: result
});
alert(result);
$("#grid").data("kendoGrid").setDataSource(ds);
},
error: function(result) {
options.error(result);
}
});
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
fileName: "test"
},
pdf: {
fileName: "test"
},
});
});
At the alert(result) this is what the data looks like:
[
{"TEST":"one"},
{"TEST":"two"},
{"TEST":"three"}
]
The ajax call appears to be working and the data looks good to me, but the kendo grid is not updating, it remains blank. I also do not get any error. I've tried placing the kendoGrid inside the ajax success function with the same result. I've tried using transport and read in the DataSource to retrieve the data but that kept giving me an error: n.slice is not a function. However, others seemed to think that was because there was no schema defined. Due to the kind of data I am retrieving, I cannot define this. The data retrieved from the server could have any column/field names, and any number of columns. It is not complex JSON however.
How do I get my grid to populate with this data?
I have created a new Datasource and mapped it to the existing one outside the success method.
Can you try this one below :
var newDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Utilities/Report/Run",
dataType: "json",
data: JSON.stringify(model),
error: function (result) {
options.error(result);
}
}
}
});
var d1 = $("#grid").data("kendoGrid");
d1.dataSource.data([]);
d1.setDataSource(newDataSource );
make changes as per your necessity if I have missed any . Kendo data binding is always confusing :D
Kendo DataSource is very powerful. Ideally, you do not need to make a manual Ajax call. Instead, DataSource can Ajax request data from URL by itself, if Grid needs data.
https://jsfiddle.net/6gxqsrzu/
$(function() {
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
serverPaging: true,
pageSize: 5,
serverSorting: true,
sort: {
field: 'OrderDate',
dir: 'asc'
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>
I am new to ExtJS.
I am developing a page which has a form at the top and a grid below. When user enters the search criteria in the form and enters Submit, grid has to be populated with data accordingly.
I have managed to get the JSON data from server to the client
console.log('response.responseText');
prints the data correctly, but unable to assign that to the grid.
Here is my code
Ext.define('colModel', {
extend: 'Ext.data.ColumnModel',
fields: [
'personId',
'country',
'idType',
'idValue'
]
});
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'colModel',
fields: [
{name: 'personId'},
{name: 'country'},
{name: 'idType'},
{name: 'idValue'}
],
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'person'
}
},
autoLoad: false,
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
id: 'myGrid',
stateId: 'stateGrid',
columns: [
{
text : 'Person Id',
flex : 1,
sortable : false,
dataIndex: 'personId'
},
{
text : 'Country',
width : 75,
sortable : true,
dataIndex: 'country'
},
{
text : 'ID Type',
width : 75,
sortable : true,
dataIndex: 'idType'
},
{
text : 'Id Value',
width : 75,
sortable : true,
dataIndex: 'idValue'
},
],
height: 350,
title: 'Array Grid',
renderTo: 'bottom',
viewConfig: {
stripeRows: true,
ForceFit: true,
loadMask:false
}
});
and this function get invoked after form submission and response returned from server
displayGrid : function(response, opts) {
//Received response from the server
console.log('On Success');
responseData = Ext.decode(response.responseText);
console.log('response success ',responseData);
console.log(Ext.getCmp('myGrid').getStore());
grid.getStore().loadData('colModel',false);
}
I have managed to populate grid data on page load using the following code
var store = Ext.create('Ext.data.ArrayStore', {
model: 'colModel',
proxy: {
type: 'rest',
url : 'PersonSearch',
reader: {
type: 'json',
root: 'person'
}
},
autoLoad: true
});
but failed to load grid data on form submission.
Please help. Thanks in advance.
PS: I am using ExtJS 4.2
Update
This is the JSON update, I am getting from the server(caught using Firefox Browser Console)
"{"person":[{"personId":"1","country":"country 1","idType":"idType 1","idValue":"idValue 1"},{"personId":"2","country":"country 2","idType":"idType 2","idValue":"idValue 2"},{"personId":"3","country":"country 3","idType":"idType 3","idValue":"idValue 3"},{"personId":"4","country":"country 4","idType":"idType 4","idValue":"idValue 4"},{"personId":"5","country":"country 5","idType":"idType 5","idValue":"idValue 5"}]}
"
You aren't actually loading the data. Your data is stored in responseData, so your loadData call should load that data into the store. So, your loadData call should be as follows:
grid.getStore().loadData(responseData);
Note that this assumes that your responseData is in the correct format for the store you are loading it into. (Also note that the second parameter is false by default, so it isn't necessary to include it in this case)
Used forgivenson comment and set autoLoad: true
and
Updated the displayGrid method as below
displayGrid : function(response, opts) {
//Received response from the server
console.log('On Success');
responseData = Ext.decode(response.responseText,false);
console.log(response.responseText);
grid.getStore().loadData(responseData.person);
}
and the grid gets populated correctly.
I tryed every answer i found (in Stackoverflow there are many) to solve my problem with the store of extjs, but still the data doesn't get displayed in the grid, even if the grid is correctly fisplayed. I'm confused so I'm writing the "store" I was able to build reading the answer on this site. I don't know why it's not loading the data into the grid. If you need more information to help please ask.
store: Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'StoreName',
fields: ['id','name'],
data : JsonObject,
model: 'ModelName',
proxy: {
type: 'memory',
reader: {
type: 'json',
record: 'JsonRoot'
}
}
})
The grid is loaded in a new window through an ajax call. The code of the new window is the following:
Ext.create('Ext.window.Window', {
title: 'GridTitle',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [
{
text : 'id',
flex : 1,
sortable : true,
dataIndex: 'id'
},
{
text : 'name',
width : 300,
sortable : true,
dataIndex: 'name'
}],
I do have the impression that the part with the columns is not read by ext.js, cause it doesn't index the name and id of the data i'm passing to it in the json.
The solution was so simple that I'm embarrassed to say it.
reader: {
type: 'json',
root: 'jsonRoot'
}
Instead of:
reader: {
type: 'json',
record: 'jsonRoot'
}
I'm having problem loading data from JSON store to EXT grid. Following is the code:
var store = new Ext.data.JsonStore({
root: 'rates',
autoLoad=true,
fields: ['mainid','Country'],
proxy : new Ext.data.HttpProxy({
method: 'GET',
url: '/projectLink/gridData.php'
})
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: 'grid-rates',
width:700,
height:500,
title:"Country",
store:store,
columns:[
{id: 'mainid', header: "mainid", width: 200, sortable: true, dataIndex: 'mainid'},
{id: 'Country', header: "Country", width: 200, sortable: true, dataIndex: 'Country'}
]
});
The JSON store is getting filled as it sends request to server and data is sent back but the grid is never populated :( What's missing?
Following the JSON that I'm using:
{"count":"18239",
"rates":[
{"mainid":"75966","Country":"Afghanistan Cellular-AT"},
{"mainid":"75967","Country":"Afghanistan Cellular-AWCC"},
{"mainid":"75968","Country":"Afghanistan Cellular-Areeba"},
{"mainid":"75969","Country":"Afghanistan Cellular-Etisalat"},
{"mainid":"75970","Country":"Afghanistan Cellular-Others"},
{"mainid":"75971","Country":"Afghanistan Cellular-Roshan"},
{"mainid":"75972","Country":"Albania"},
{"mainid":"75973","Country":"Albania Cellular-AMC"},
{"mainid":"75974","Country":"Albania Cellular-Eagle"},
{"mainid":"75975","Country":"Albania Cellular-Plus"}
]}
Please help!
use Ext.data.Store instead JsonStore, tested in 4.0.2a
also i can't find JsonStore at the docs
try this:
var store = new Ext.data.Store({
fields:['mainid','Country'],
proxy: {
type: 'ajax',
url : '/projectLink/gridData.php',
reader: {
type: 'json',
root: 'rates',
totalProperty : "count"
}
},
autoLoad : true
});
I'm not sure if this is the problem, but the config autoLoad is wrong.
You have: autoLoad=true
It should be: autoLoad : true