My ExtJS Grid is not showing my store data. Using ExtJS 5
This is my grid (it's within a hbox):
{
xtype: 'grid',
title: 'Company Manager',
id: 'companyGrid',
flex: 1,
plugins: 'rowediting',
columnLines: true,
store: Ext.data.StoreManager.lookup('companyStore'),
columns: {
items: [{
header: 'ID',
dataIndex: 'id',
},
{
header: 'Name',
dataIndex: 'name',
},
{
header: 'Token',
dataIndex: 'access_token'
},
]
}
}
This is my store (I use the Google Extension of Sencha and it's filled with my data so this works + the ending }); were ignored by the coding block):
var companyStore = Ext.create('Ext.data.Store', {
storeId: 'companyStore',
proxy: {
type: 'ajax',
url: 'resources/data/company.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'access_token',
type: 'string'
}],
autoLoad: true
});
Does anyone know were I went wrong here?
I have tried: Reloading the store, checking if the store is actually filled, refreshing the grid view.
Nothing I tried worked and I decided to ask you guys for advice :)
#Evan Trimboli
You made me think and I fiddled arround for a second and found the following solution.
Instead of using the
store : Ext.data.StoreManager.lookup('companyStore'),
I used
bind : '{companyStore}',
And moved the define store towards the CompanyModel.js file :) now it works properly!!!!
Thanks :D
Related
This question already has an answer here:
ExtJS combobox filter
(1 answer)
Closed 3 years ago.
Filter for combobox is not working and I am not sure why. I have two comboboxes, one is province and other is city. When I select a province, the city combobox will be filtered according to the selected province using the province_id.
View Model Code:
data: {
selectedProvince: null
},
stores: {
province: {
fields: [ 'province_id', 'province_name' ],
proxy: {
type: 'ajax',
url: '*some url to province*',
reader: {
type: 'json',
rootProperty: 'data'
}
}
},
city: {
fields: [ 'city_id', 'city_name', 'province_id' ],
proxy: {
type: 'ajax',
url: '*some url to city*',
reader: {
type: 'json',
rootProperty: 'data',
}
},
},
filteredStore: {
type: 'chained',
source: '{city}',
remoteFilter: false,
filters: [{
property: 'province_id',
value: '{selectedProvince}'
}],
}
}
Province Combobox Code:
xtype: 'combobox',
label: 'Province',
valueField: 'province_id',
displayField: 'province_name',
bind: {
store: '{province}',
value: '{selectedProvince}'
}
City Combobox Code:
xtype: 'combobox',
label: 'City',
valueField: 'city_id',
displayField: 'city_name',
bind: {
store: '{filteredStore}'
}
I have tried these:
https://fiddle.sencha.com/#fiddle/983&view/editor
https://fiddle.sencha.com/#view/editor&fiddle/2dt0
And I have also tried placing the filter inside the combobox like this:
xtype: 'combobox',
label: 'City',
valueField: 'city_id',
displayField: 'city_name',
bind: {
store: '{filteredStore}',
filters: {
property: 'province_id',
value: '{selectedProvince}'
}
}
And still, the results are still not filtered. I'm using extjs 7, if that helps. Thanks
This is a duplicate from your other question:
The answer is still in this Fiddle
I updated it to match your question in this thread.
You have to set both stores to autoLoad: true and the combobox to queryMode: 'local'.
I'm learning extJS and trying to create simple application following this and that guides.
My app.js file:
sstore = new Ext.data.Store({
autoLoad: true,
fields: ['firstName', 'lastName', 'educationId', 'townId'],
proxy: {
type: "ajax",
url: "data",
reader: {
type:"json",
root: "users"
}
}
});
Ext.application({
name: 'Application',
autoCreateViewport: true,
controllers: ['MainController']
});
Viewport.js:
Ext.define('Application.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: { type: "vbox", align: 'stretch' },
items : [{
xtype: 'mainList',
autoScroll: true
}]
});
List.js:
Ext.define('Application.view.List', {
extend: 'Ext.grid.Panel',
alias : 'widget.mainList',
title : 'Users',
store: sstore, // ***** LOOK HERE PLEASE *****
//store: 'Users',
columns: [
{ header: 'Имя', dataIndex: 'firstName' },
{ header: 'Фамилия', dataIndex: 'lastName' },
{ header: 'Образование', dataIndex: 'educationId'},
{ header: 'Город', dataIndex: 'townId'}
]
});
Store (Users.js) :
Ext.define('Application.store.Users', {
extend: 'Ext.data.Store',
storeId: 'usersStore',
//model: 'Application.model.User',
fields: ['firstName', 'lastName', 'educationId', 'townId'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data',
reader: {
type: 'json',
root: 'users'
}
},
onProxyLoad: function (aOperation) {
console.log('From store');
console.log(aOperation);
}
});
When I'm changing store: sstore on store: 'Users' in my List.js file, it's not loading any data, but with store created in app.js file, which lives in sstore variable, it works ok.
What I tried and it didn't help:
using memory proxy,
used store: Ext.data.StoreManager.lookup('usersStore'),
it's not problem with backend data (because sstore works fine)
I can see that the store from Users.js is loading (because the console output from onProxyLoad function).
This is what I see in a browser:
Full js app lives here
My view file is here
And I'm using extJS 4.2
This was really stupid. Problem was in onProxyLoad function. When I deleted it from store app worked as I expected.
I'm only asking this because I've seemingly tried everything I can find, and it has to be easier than I'm making it.
I'm working with Sencha Touch (EXTJS knowledge is still helpful). When I console.log the store, it shows no items/data. I am getting a good response from the store's load call, but it's not making it into the store. I appreciate the help.
Model:
Ext.define('NQT.model.NENEventsModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'regionId', type: 'int', mapping: 'regionId'},
{name: 'regionName', type: 'string', mapping: 'regionName'},
{name: 'state', type: 'string', mapping: 'state'},
{name: 'switchId', type: 'int', mapping: 'switchId'},
{name: 'switchName', type: 'string', mapping: 'switchName'}
]
});
Store:
Ext.define('NQT.store.NENEventsStore',
{
extend: 'Ext.data.Store',
storeId: 'NENEventsStore',
config: {
model: 'NQT.model.NENEventsModel',
proxy: {
type: 'jsonp',
url: 'http://this_is_not_the_url.com:8080/rest/json',
method: 'GET',
pageParam: false,
startParam: false,
limitParam: false,
noCache: false,
reader: {
type: 'json',
rootProperty: ''
}
}
}
});
Part of view:
var eventsStore = Ext.create('NQT.store.NENEventsStore');
{
xtype: 'grid',
titleBar: false,
store: eventsStore,
columns: [
{text: 'regionId', dataIndex: 'regionId', width: 150},
{text: 'regionName', dataIndex: 'regionName', width: 150},
{text: 'state', dataIndex: 'state', width: 150},
{text: 'switchId', dataIndex: 'switchId', width: 150},
{text: 'switchName', dataIndex: 'switchName', width: 150}
]
},
{
xtype: 'button',
docked: 'bottom',
text: 'Reload Grid',
handler: function () {
console.log(eventsStore);
eventsStore.load();
}
}
JSON Sample:
[{"regionId":1,"regionName":"NY Metro","state":"NJ","switchId":167,"switchName":"Jersey City 1"},
{"regionId":1,"regionName":"NY Metro","state":"NY","switchId":2029,"switchName":"Farmingdale 1"},
{"regionId":4,"regionName":"New England","state":"CT","switchId":203,"switchName":"Wallingford 1"}]
As Evan Trimboli pointed out, my response was not as good as I thought it was; it was missing the Ext.data.JsonP.callback that should have preceded it. I created a web service for the URL so I could make the call properly without being a security risk.
Part of the service:
<?php
$app->group('/secret', function () use ($app) {
$app->get('/getData', function () use ($app) {
$callback = $app->request()->get('callback');
$events = file_get_contents("http://example_url.com:8080/this/is/the/path");
if(!empty($callback)){
$app->contentType('application/javascript');
echo sprintf("%s(%s)", $callback, $events);
} else {
echo $events;
}
});
});
?>
I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!
In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}
I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.
The model:
Ext.ns('Workout.Models.user');
Ext.regModel('User', {
fields: [{
name: 'member_id',
type: 'int'
}, {
name: 'first_name',
type: 'string'
}, {
name: 'last_name',
type: 'string'
}, {
name: 'username',
type: 'string'
}, {
name: 'password',
type: 'string'
}, {
name: 'dob',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'email_address',
type: 'string'
}, {
name: 'is_active',
type: 'int'
}],
proxy: {
type: 'ajax',
format: 'json',
url: '../../_dev/json_fixtures/users.json',
reader: {
type: 'json',
root: 'users'
},
root: 'users'
}
});
The Store:
Ext.ns('Workout.Stores');
Workout.Stores.user = new Ext.data.Store({
model: 'User',
storeId : 'Workout.Stores.user',
sorters: [
'last_name',
'first_name',
'member_id'
],
autoLoad: true
});
The Grid:
Ext.ns('Workout.User');
Workout.User.grid = new Ext.grid.Panel({
store: 'Workout.Stores.user',
columns:[{
text: 'Created At',
dataIndex: 'created_at'
}, {
text: 'First Name',
dataIndex: 'first_name'
}]
});
The JSON File
{
"users":[{
"created_at":"2011-04-01 14:13:34",
"member_id":"14453",
"first_name":"Jemima",
"last_name":"Petersen",
"username":"jpeterson",
"password":"TDW29HOH7WY",
"dob":"1960-07-03",
"email_address":"at.velit.Pellentesque#sociis.com"
}]
}
Wheh I load my HTML page, the grid is empty. However, if I supply raw data to the store via the data param, it loads. If I call User.load() manually via the console, nothing happens. If i call User.load() and pass in a valid JSON object,nothing happens.
Is there something I'm missing / not doing right?
You have done everything expect set the height of your grid panel. You need to set the height to display the records. Here is what I would add to your grid panel config:
height: 300
Now, apart from this, you have other problems like you have not defined created_at in your User model. If you plan to display the value in your grid, you need to update your model as well.
Ext.define(
'BK.store.Categories'
, { extend : 'Ext.data.Store'
, model : 'BK.model.Category'
, autoload : true
, proxy : { type : 'ajax'
, format : 'json'
, root : 'results'
, api : { read : 'data/data1.json' }
, reader : new Ext.data.JsonReader({ type : 'json'
, root : 'results'
, successProperty : 'success'
})
}
}
);
when I use data hardcoded in the store, it works OK (so model, view, controller are OK), as soon as I use the proxy it behaves as if autoload were FALSE, no net request