I am trying to load data in the extjs grid with paging toolbar using loaddata but it shows empty grid.
The data returned is
{
"data": [{
"id": "user1",
"title": "index0"
}, {
"id": "user2",
"title": "index1"
}, {
"id": "user3",
"title": "index2"
}, {
"id": "user4",
"title": "index3"
}],
"total": 8,
}
My code looks like
initcomponent:function(){
defaultModel:[{
header: 'Date',
dataIndex: 'id',
sortable: true
},
{
header: 'title',
dataIndex: 'title',
sortable: false,
}];
}
this.currStore = Ext.create('Ext.data.Store', {
fields : ['id','title'],
pageSize:4,
autoLoad:false,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data',
totalProperty:'total',
}
}
});
this.currStore.load({
params:{
start:0,
limit: 4,
}
});
var config =
{
columns : this.defaultModel,
store : this.currStore,
columnLines : true,
loadMask : true,
autoScroll : true,
tbar : [{
xtype : 'button',
text : 'Refresh',
iconCls : 'btn-refresh',
scope : this,
handler : this.refreshGridData
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: this.currStore, // same store GridPanel is using
dock: 'bottom',
id:'pagingErrNot1',
pageSize:4,
displayInfo: true,
emptyMsg: "No notification to display",
listeners:{
beforechange : {
scope : this,
fn : function(pagingtoolbar,pageNumber,scope)
{
}
}
}
}],
};
Ext.apply(this,config);
this.callParent(arguments);
}
data is of the form given above and setdata is called after the data is returned from server side.
setData:function(data)
{
this.getStore().loadData(data);
this.getView().refresh();
}
but after loadData, grid is empty and and pagingtoolbar shows disabled.WHat am i doing wrong?
Related
I'm getting from php an json encoded
{
"employees": [{
"Employee_ID": "1",
"Department_ID": "2",
"Name": "Bagio",
"Email": "bagio#gmail.com"
}, {
"Employee_ID": "2",
"Department_ID": "2",
"Name": "Sinchan",
"Email": "sinchan#gmail.com"
}]
}
When I try to load it I get no response. This is my ExtJs 4.2 code
Ext.onReady(function() {
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
'Employee_ID', 'Department_ID', 'Name', 'Email'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Person',
autoLoad: true,
proxy: {
type: 'memory',
url: 'example.php',
reader: {
type: 'json',
root: 'employees'
}
}
});
store.load();
Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
text: "Employ_id",
width: 120,
dataIndex: 'Employee_ID'
},
{
text: "Department_ID",
width: 380,
dataIndex: 'Department_ID'
},
{
text: "Name",
width: 380,
dataIndex: 'Name'
},
{
text: "Email",
width: 380,
dataIndex: 'Email'
}
],
renderTo: 'example-grid',
width: 500,
height: 280
});
});
Try changing the store's proxy type from memory to ajax. Memory proxy usually is for data that will be loaded from the client session itself, not from a remote source.
How do I populate combo box values instead of hard coding from the database into the store of combo box
{
xtype: 'fieldset',
title: 'Dress Types',
items: [
{
xtype: 'combobox',
displayField: "displayName",
valueField: "displayName",
emptyText: 'Select Type',
store: {
fields: ["id", "displayName"],
data: [
{ "id": "1", "displayName": "Kurtha" },
{ "id": "2", "displayName": "Denim Top" },
{ "id": "3", "displayName": "Western T shirt" },
{ "id": "4", "displayName": "Sleeveless" }
]
},
name: 'dresses',
margin: '15px',
allowBlank: false,
forceSelection: true,
}
]
}
Thanks in advance
There are ways by which you can get this. You need to create one store in your js from your input data and then assign it to the comboBox.
Given example
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'value',
mapping: "ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "TITLE",
type: 'string'
}],
proxy: new Ext.data.HttpProxy({
type: 'ajax',
actionMethods: {
read: "POST"
},
url: Your URL,
headers: {
'Accept': 'application/json; charset=utf-8'
},
reader: {
type: 'json',
rootProperty: 'data'
},
autoLoad: true
})
});
Now in your comboBox you can call this combstore to your store.
store :combstore
In the variable combostore we are creating one data store by using Ext.data.Store and placing values in field. Then in proxy method calling url and mapping the values from field.
Read the doc for better understanding Doc
Check the below code.
Ext.create('Ext.form.ComboBox', {
valueField: "displayName",
emptyText: 'Select Type',
store: Ext.create('Ext.data.Store', {
fields: ["id", "displayName"],
proxy: {
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
}),
name: 'dresses',
margin: '15px',
allowBlank: false,
forceSelection: true,
renderTo: Ext.getBody()
});
I assumed my service returing data like below
{
"data": [{
"id": "1",
"displayName": "Kurtha"
}, {
"id": "2",
"displayName": "Denim Top"
}, {
"id": "3",
"displayName": "Western T shirt"
}, {
"id": "4",
"displayName": "Sleeveless"
}]
}
I think I have everything correct here :
A simple model :
Ext.define('js.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: "name",
type: "string"
},
{
name: "type",
type: "string"
}
]
});
A tree panel with tree store :
Ext.define('js.packageDialog.ReleaseTreeView.PackageTree', {
extend: 'Ext.tree.Panel',
rootVisible: true,
singleExpand: false,
initComponent: function () {
//Ext.create('js.model.MyModel');
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'js.model.MyModel',
"root": {
"expanded": true,
"name": "",
"type": ""
},
proxy: {
type: 'memory'
//data: data
}
}),
columns: [
{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name'
},
{
text: 'Parents',
dataIndex: 'parents'
}
]
});
this.callParent();
},
loadData : function() {
this.store.setRootNode(data);
}
});
Some data :
var data = Ext.JSON.encode({
"children": [{
"type": "folder",
"name": "Photos",
"children": [{
"type": "JPEG",
"name": "wedding picture"
}, {
"type": "JPEG",
"name": "holiday picture"
}
]
}]
});
I put all this together. See the fiddle :
http://jsfiddle.net/x527x57t/
And nothing is shown in the tree panel. The columns are correct, however my loadData() method does not work.
I have got it to work like so:
var data = {
children: [{
text: "Photos",
leaf:false,
children: [{
"type": "JPEG",
text: "wedding picture",
leaf:true
}, {
text: "holiday picture",
leaf:true
}]
}]
};
Ext.define('js.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: "text",
type: "string"
},
{
name: "type",
type: "string"
},
{
name:"leaf"
}
]
});
Ext.define('js.packageDialog.ReleaseTreeView.PackageTree', {
extend: 'Ext.tree.Panel',
rootVisible: true,
singleExpand: false,
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'js.model.MyModel',
root: {
expanded: true
//type: ""
},
proxy: {
type: 'memory'
//data: data
}
})
});
this.callParent();
},
loadData : function() {
this.store.setRootNode(data);
}
});
So specifying which are leaf nodes in the data, also properties like the root of your TreeStore was wrapped in quotes, so I just amended. The data is now displaying. This may not be the 'correct' answer but one I can offer so far for you. Hope it helps.
i want to load my Combobox in a Panel from Store.
var colors = new Object();
Ext.onReady(function(){
colors = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'app/view/main/loadFromDatabase.php',
reader: {
type: 'json',
rootProperty: 'name'
}
},
});
The colors i want load a little bit later in my Panel like this:
{ xtype: 'combo',
fieldLabel: 'Farbe',
name: 'farbe',
store: colors ,
queryMode: 'local',
displayField: 'name',
valueField: 'id' }
The response of my ajax request of loadFromDatabase.php is:
[
{
"id": "1",
"name": "Red"
},
{
"id": "2",
"name": "Blue"
},
{
"id": "3",
"name": "Green"}]
this seems like a valid json.
But when i click on the combobox the box is empty. Whats wrong?
Add these to your combo:
listeners : {
added : function(tis) {
tis.getStore().load();
}
}
and add these to your store:
listeners : {
load : function() {
Ext.getCmp('yourcomboid').setValue(Ext.getCmp('yourcomboid').getValue());
}
}
at last, to avoid second loading, add the following to the combo:
mode : 'local'
full code :
{
xtype : 'combo',
fieldLabel : 'Role Selection',
id : 'role',
hiddenName : 'role',
hiddenValue : 1,
editable : false,
emptyText : 'Please select a role',
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
listeners : {
added : function(
tis) {
tis.getStore().load();
}
},
store : new Ext.data.JsonStore(
{
url : 'getRole',
listeners : {
load : function() {
Ext.getCmp('role').setValue(Ext.getCmp('role').getValue());
}
},
fields : ['id','name' ],
root : 'resultList',
}),
displayField : 'name',
valueField : 'id'
}
Your json should look like the below
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}]
Then you can specify your store as
var myStore = Ext.create('Ext.data.Store', {
fields:['name','email','phone'],
proxy: {
type: 'ajax',
url: '/yourpath.json',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: true
});
So you have to make your json as key with array of objects and specify that key in the root property in reader config.There is also no rootProperty property for a normal store.Remove that as well.
Hope this helps you.
i have found an other solution
i don´t know if this solution is better then the other, but it works :)
var colorsFromDB = [];
var colors = Ext.create('Ext.data.Store', {
id: "colors",
fields: ['id', 'name'],
data : colorsFromDB
});
Ext.Ajax.request({
url: "app/view/main/loadFromDatabase.php",
method: 'POST',
success: function( r ) {
var res = Ext.decode(r.responseText);
if (res !== null) {
Ext.each(res.colors, function(obj) {
colorsFromDB.push({
id: obj.id,
name: obj.name
})
});
colors.loadData(colorsFromDB);
}
},
failure: function( r ) {
console.log(r.responseText);
}
});
Sorry I think this may be a duplicate. But I am not getting correct answer from anywhere. Please help me to find the issue.
I am creating a Ext Js grid with store. Also with the help of this blog
http://blog.jardalu.com/2013/6/21/grid-paging-extjs-sencha
I am creating Grid whcih loads Data Page for the first PAge. But when I press next, last, refresh no events are working. Also from the console am getting an error like this from ext js file
Uncaught TypeError: Cannot read property 'name' of undefined
Please help me to find the issue.
Code:-
/*global Ext:false */
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function () {
var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
id: 'simpsonsStore',
autoLoad: false,
fields: ['name', 'email', 'phone'],
pageSize: itemsPerPage,
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items',
totalProperty: 'total'
}
},
listeners : {
beforeload : function(store, operation, eOpts){
var page = operation.page;
var limit = operation.limit;
var dataResult = [];
var startPage = (page -1) * 2;
var totalCount = startPage + limit;
console.log(store.proxy.data);
for (var i = startPage; i < totalCount ; i++) {
dataResult.push(store.proxy.data.items[i]);
}
store.proxy.data.items = dataResult;
store.proxy.data.total = 4;
}
}
});
var TOTAL = 94; //random
// specify segment of data you want to load using params
store.loadPage(1);
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Phone',
dataIndex: 'phone'
}],
width: 400,
height: 125,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});
Please see the DEMO here :- http://jsfiddle.net/B6qBN/
I don't know your problem ( actually I tried to fix issue but didn't want to spent much time ). Here is the working sample. It seems to me, there is a data model problem.
Sencha Fiddle: Paging Toolbar
// Json File for demostration
{
"total": 5,
"userList":[
{"uid": "1", "firstName":"Tommy","lastName":"Maintz"},
{"uid": "2", "firstName":"Ed","lastName":"Spencer"},
{"uid": "3", "firstName":"Oğuz","lastName":"Çelikdemir"},
{"uid": "4", "firstName":"Jamie","lastName":"Avins"},
{"uid": "5", "firstName":"Dave","lastName":"Kaneda"}
]
}
// the following is code section
var itemsPerPage = 2; // set the number of items you want per page
Ext.onReady(function(){
Ext.define('senchatest.model.Contact', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
});
var UserList = new Ext.data.JsonStore ({
model: 'senchatest.model.Contact',
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url : 'contacts.json',
reader: {
type: 'json',
root: 'userList',
totalProperty: 'total'
}
}
});
UserList.load();
var users = Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width: 300,
height: 400,
title: 'User List',
items: [
{
xtype: 'gridpanel',
store: UserList,
columns: [
{text: 'Name', dataIndex: 'firstName'},
{text: 'Surname', dataIndex: 'lastName'}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: UserList, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]
}
],
renderTo: Ext.getBody()
})
});