I'm new in Sencha and in my project, there have a button when you clicked in it will send the request to the server and show the value that returned back in Json form.
I've check and the store have value but I don't know why the grid panel is empty
here my function to send request and load the data into grid
loadVersion: function(i_chronicle_id){
Ext.getCmp('documentVersionsPanel').body.update('<i>Loading...<i>');
var documentVersionStore = new Ext.create('Ext.data.Store',{
storeId:'documentVersion',
fields:['documentID', 'documentVersion', 'documentStatus'],
proxy: {
type: 'ajax',
actionMethods: 'post',
url: 'ajaxAction?action=getDocumentVersion',
extraParams: {
format: 'json',
documentID: documentID,
},
reader: {
type: 'json',
root: 'jsonList'
}
}
});
Ext.getCmp('documentVersionsPanel').store = documentVersionStore;
Ext.getCmp('documentVersionsPanel').getStore().reload();
and the grid panel
{
xtype: 'gridpanel',
title: 'Versions',
id: 'documentVersionsPanel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'documentVersion',
id: 'versionColumn',
text: 'Version'
},
{
xtype: 'gridcolumn',
dataIndex: 'documentStatus',
id: 'statusColumn',
text: 'Status'
}
]
},
Related
Hi im new to Sencha Extjs im trying to pull the data from the API that i created in asp.net.
in the developer tools i can get the data but it is not showing in the grid. Can anyone help?
here is the code that i did.
This is the Model
Ext.define('VidlyViews.model.Customers', {
extend: 'VidlyViews.model.Base',
fields: [
'name', 'membershipType', 'isSubscribeToNewsLetter', 'birthDate'
]
});
This is the Store.
Ext.define('VidlyViews.store.Customers', {
extend: 'Ext.data.Store',
alias: 'store.customers',
model: 'VidlyViews.model.Customers',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'https://localhost:44300/api/customers',
reader: {
type: 'json',
rootProperty: 'feed.entry'
}
}
});
This is in the classic/src/view/main folder
Ext.define('VidlyViews.view.main.Customers', {
extend: 'Ext.grid.Panel',
xtype: 'customerlist',
requires: [
'VidlyViews.store.Customers'
],
title: 'Customers',
store: {
type: 'customers'
},
columns: [
{ text: 'Customer Name', dataIndex: 'name', flex: 1 },
{ text: 'Membership Type', dataIndex: 'membershipType', flex: 1 },
{ text: 'Newsletter', dataIndex: 'isSubscribeToNewsLetter', flex: 1 },
{ text: 'Birthdate', dataIndex: 'birthDate', flex: 1 }
],
listeners: {
select: 'onItemSelected'
}
});
Thank you in advance
i fixed my problem and i hope it can help others in the future.
i changed my proxy to this:
proxy : {
type : 'rest',
actionMethods : {
read : 'GET'
},
url : 'https://localhost:44300/api/customers',
useDefaultXhrHeader: false,
reader: {
type : 'json',
headers: { 'Accept': 'application/json' },
allDataOptions: {
associated: true,
persist: true
},
rootProperty : 'data'
},
}
I used restto pull the data. and the rootPropery is the data.
In the API (ASP.NET) i modified the IhhtpActionResult to this
public IHttpActionResult GetCustomers(int start, int limit)
because in sencha you can get the start and limit of the pagination and use .Skip() and .Take() on the backend.
it looks like this:
var customerDtos = customersQuery
.OrderBy(c => c.CustomerId)
.Skip(start)
.Take(limit)
.ToList();
and the last step that i did is to return the data like this:
return Ok(new { total = customerDtos.Count(), data = customerDtos });
the data is recognized in the rootProperty as the collection of data and the total is the total count of the data that can be recognized in the API call.
I hope it helps. It took me a whole day to figure it out hahaha
I have the below code that I am trying to get the list of dates using Ajax and display those on the page as links to elsewhere. So each entry would be a link that when you click would take you elsewhere. Though the treelist is not loading any items...
Data
{
"success": true,
"data": [
"2018-10-08T00:00:00",
"2018-10-05T00:00:00",
"2018-10-04T00:00:00",
"2018-10-03T00:00:00",
]
}
Code
Ext.define('...', {
extend: 'Ext.form.Panel',
xtype: '...',
requires: [
'...'
],
layout: 'border',
items: [{
xtype: 'container',
store: {
proxy: {
type: 'ajax',
url: '...',
useDefaultXhrHeader: true,
withCredentials: true,
reader: {
type: 'json',
rootProperty: 'data'
},
}
}
}]
});
You can display a grid with your data. It can show clickable links.
To do this you need to make a grid with your ajax store and a grid renderer like this:
// Ajax store
Ext.create('Ext.data.Store', {
storeId: 'mystore',
autoLoad: true,
proxy: {
type : 'ajax',
url : '/file.php',
actionMethods: {
read: 'POST'
},
reader : {
type: 'json'
},
extraParams : {
key : 'val'
},
fields : [
{name: 'date', type: 'string'}
]
}
})
// Grid
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
scrollable: true,
store: {
type: 'mystore'
},
columns: [
{
text: 'link column',
dataIndex:'link',
renderer: function(value) {
if(value) {
// here you can format your output
return ''+value+'';
}
}
}
]
})
Please look whole example in a Fiddle
I have a fully working liveSearchGridPanel in ExtJs. Error occurs when I edit any row. What Happens is that if the the updated row has to be resorted like in my case when I change the age of user (I am sorting on basis of age) row goes up or down in the grid, but the previous record remain there as well until I refresh the entire webpage manually. Screenshot is below
My proxy model is:
Ext.define('proxymodel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
persist: false
}, {
name: 'gender',
type: 'auto'
}, {
name: 'name',
type: 'auto'
}, {
name: 'age',
type: 'int'
}],
identifier: 'sequential', // to generate -1, -2 etc on the client
proxy: {
type: 'rest',
//format: 'json',
//appendId: false,
idParam: "id",
//limitParam:"",
//filterParam: "",
//startParam:'',
//pageParam:'',
url: 'http://localhost:3000/posts',
api: {
read: 'http://localhost:3000/db',
create: 'http://localhost:3000/posts',
update: 'http://localhost:3000/posts',
destroy: 'http://localhost:3000/posts'
},
headers: {
'Content-Type': "application/json"
},
reader: {
type: 'json',
rootProperty: 'posts',
totalProperty: 'total'
},
writer: {
type: 'json'
}
}
});
In Application.js, I have defined row editing plugin as:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
},
edit: function(editor, e) {
// commit the changes right after editing finished
e.record.commit();
}
}
});
And my store looks like:
Ext.define('Store', {
extend: 'Ext.data.Store',
storeId: 'peopleStore',
pageSize: 500,
//buffered: true,
//leadingBufferZone: 300,
pageSize: 5,
autoLoad: {
start: 0,
limit: 5
},
autoSync: true,
sorters: [{
property: 'age',
direction: 'ASC'
}],
groupField: 'gender'
});
Can anyone point out my mistake?
I have tried to reload my store after editing in 'edit' function of rowEditing but it didn't work.
Thanks for your time.
As full answer by request:
Have you tried Ext.data.StoreManager.lookup('peopleStore').reload() ?
I have a paging grid with a store. I have to change the proxy of the store, but when i do this and try to reload the grid, it gives a loading mask and do nothing else. Can you help me?
This is the original store:
var store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: {
type: 'direct',
directFn: Ext.d.Class.Function,
extraParams: {
param: param
},
paramOrder: ['param', 'filter', 'start', 'limit', 'sort'],
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
},
fields: fields,
remoteSort: true,
autoLoad: false,
sorters: sorters
});
The original grid:
var grid = Ext.create('Ext.grid.Panel', {
selModel: selmodel,
title: title,
flex: 1,
store: store,
columns: columns,
bbar: pager = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{1} / {2}',
emptyMsg: ""
})
//...
The new proxy:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
paramsAsHash: false,
url: 'tasks.php',
actionMethods: {
read: 'POST'
},
extraParams: {
task: 'getItems',
id: id
},
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
});
And I tried to set proxy and load the store, but it doesn't do anything.
grid.getStore().removeAll();
grid.getStore().setProxy(newProxy);
grid.getDockedItems()[2].store.setProxy(newProxy);
grid.getStore().load(); // fails, loading mask but no ajax
Any idea?
That's because you're not actually creating an Ajax proxy, but its parent class Ext.data.Proxy. The type is not interpreted in these lines:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
You have to specify the actual class name:
var newProxy = Ext.create('Ext.data.proxy.Ajax', {
(And, IMHO, you'd better create it with the new keyword new Ext.data.proxy.Ajax, so that you discover your missing requires early...)
When I run this sample, it causes a error: "Uncaught TypeError: Cannot call method 'get' of undefined", the problem is the sotre1 is 0 length when rendering the column,but I can't find a solution to solve this. The scenario may be unreasonable, but I just want to use the unattached store to render the grid column, is there a method to ensure the store1 loaded before rendering the column?
Here is code:
Ext.onReady(function(){
Ext.define('File', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'pid']
});
var store = Ext.create('Ext.data.Store', {
model: 'File',
//fields: ['id', 'name', 'pid'],
proxy: {
type: 'ajax',
url: 'file.json',
reader: {
type: 'json',
root: 'files',
successProperty: 'success'
}
},
autoLoad: true
});
var store1 = Ext.create('Ext.data.Store', {
model: 'File',
proxy: {
type: 'ajax',
url: 'file.json',
reader: {
type: 'json',
root: 'files',
successProperty: 'success'
}
},
autoLoad: true
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
title: 'File info',
store: store,
columns: [
{
header: 'ID',
dataIndex: 'id'
},
{
header: 'Name',
dataIndex: 'name'
},
{
header: 'ParentName',
dataIndex: 'pid',
renderer: function(pid){
var index = store1.find('id', pid); // find it's parent
console.log(index);
var name = store1.getAt(index).get('name');
return name;
}
}
]
});
});
Here is the json file:
{
success: true,
files: [
{id: 1, name: 'root', pid: 1},
{id: 2, name: 'sub1', pid: 1},
{id: 3, name: 'sub2', pid: 1},
{id: 4, name: 'sub1-1', pid: 2},
{id: 5, name: 'sub1-2', pid: 2}
]
}
It might be easier to flatten the structure on the server side and send parent name along with each child record.
another thing i noticed your stores are identical, why not just use 1?
It could be an issue related the async nature of AJAX calls, so store1 could not be loaded when you access to its records.
You can try to place the Ext.create inside the callback of store1.load() call:
store1.load({
callback: function() {
Ext.create('Ext.grid.Panel', ...);
}
});