Develop Reference

Hard coded data in global store does not show in extjs grid

I've got an extjs global store have I have hard coded with fields and data:
Ext.define('Registration.store.SavedSessions',{
extend: 'Ext.data.Store',
storeId: 'savedsessions',
fields:[
"id",
"title",
"dateStart"
],
data: [
{
id: 1,
title: 'test',
dateStart: new Date()
}
]
});
The global store is registered via the Application.js file:
Ext.define('Registration.Application', {
extend: 'Ext.app.Application',
name: 'Registration',
stores: [
'SavedSessions'
],
...
I also have a grid that I'm trying to load the store into:
Ext.define("Registration.view.cart.savedsessions.SavedSessions",{
extend: "Ext.grid.Panel",
xtype: 'savedsessions',
store: Ext.data.StoreManager.lookup('savedsessions'),
columns:[
{
text: 'Date',
dataIndex: 'dateStart'
},
{
text: 'Title',
dataIndex: 'title',
flex: 1
}
]
});
Looking at the docs this all looks correct. The problem I'm running into is that the store doesn't load.
When I open up the javascript console and count the number of records in the grid's store I get 0:
I'm not sure how this can happen at all considering the data is hard coded into the store.
Also, when I grab the store directly from the javascript console I can get the hard coded data:
What am I missing here?

Why use the StoreManager to get the store? Just use the storeId:
store: 'savedsessions',

JS console error shows Extjs trying to make a GET request for a class as if it was a file

Sorry if the title isn't the best.
I'm roughing out a test project in Extjs 6. I have a viewmodel class that uses a store called customers:
Ext.define('ChildSessionBinding.view.main.ChildSessionModel',{
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.binding.childsession',
requires:[
'Ext.data.Store',
'ChildSessionBinding.model.Customer'
],
stores:{
customers:{
model: 'ChildSessionBinding.model.Customer',
autoLoad: true,
session: true
}
}
});
The model it requires has hard coded test data in it:
Ext.define('ChildSessionBinding.model.Customer', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'auto' },
{ name: 'phone', type: 'auto' }
],
data:[
{name: 'test', phone: '12345'}
]
});
And the view that uses the ViewModel is just a panel that shows a simple grid:
Ext.define('ChildSessionBinding.view.main.ChildSession', {
extend: 'Ext.panel.Panel',
xtype: 'binding-child-session',
title: 'Binding Child Session Demo',
layout: {
type: 'vbox',
align: 'stretch'
},
viewModel: {
type: 'binding.childsession'
},
controller: 'binding.childsession',
session: true,
items:[
{
flex: 1,
xtype: 'grid',
bind: '{customers}',
columns:[
{
dataIndex: 'name',
flex: 1,
text: 'Name'
},
{
dataIndex: 'phone',
flex: 1,
text: 'Phone'
},
{
xtype: 'widgetcolumn',
width: 90,
widget: {
xtype: 'button',
text: 'Edit',
handler: 'onEditCustomerClick'
}
}
]
}
]
});
When I load this in the browser, the grid does not load. I popped open the javascript console and saw that it was trying to make a get request to the server using the model's fully qualified name:
I've compared it to the kitchen sink example I'm trying to duplicate as well as other viewmodel stores that I've created in other projects and I don't see anything that would cause this.
Also, to rule out any project file structure questions, here's the folder/file structure:
EDIT
Here's the stack trace from the javascript console:
Anyone see the problem?

Put the data in your store, not in your model. Model doesn't have a data property.

I haven't used much of Ext 5 or 6 but I think I have seen this error on Ext 4. If a required class is undefined during the time of a class definition Ext will try to load a file with that name at the root of your application. I think that Ext should be throwing an error here by default instead of trying to load a file since I assume that most applications are not set up to handle this.
The fix would be to have ChildSessionBinding.model.Customer defined and executed before you load ChildSessionBinding.view.main.ChildSessionModel or have your application be able to load that file where Ext expects it to be.

I want to read data from store for Extjs 4 but it shows [object object]

This is my model:
data: i
0: i
data: Object
events: Object
hasListeners: k
id: "region-ext-record-344"
index: 0
internalId: "ext-record-344"
modified: Object
phantom: false
raw: Array[2] // i want to get those two elements one displayField, another valueField
0: "01"
1: "Region 1"
length: 2
__proto__: Array[0]
store: i
stores: Array[1]
__proto__: Object
1: i
2: i
3: i
length: 4
__proto__: Array[0]
I can post the code if you want to!
I tried to read store like:
store: regionStore, but it is showing me an empty box with 4 empty lines equal to item count in my store, then I tried to do like store: regionStore.data.items and now it shows me [object object] lines, I totally get it why, but can't find solution for that. I am new to all ExtJs stuff, I am using ExtJs 4 though.
My model looks like that :
Ext.regModel('region', {
fields: [
{name: 'id', type: 'integer'},
{name: 'name', type: 'String'}
});
and my store looks like that:
var regionStore = new Ext.data.ArrayStore({
id: 'regionStore',
model: 'region',
data: MyDesktop.GridWindow.getRegionData() //that is data from ajax response
});
My combobox:
{
xtype: 'combobox',
value: "region",
store: regionStore,
width: 135,
id: 'regionCombo'
editable: false
}

You have tagged your question extjs 4.2, but your code is old style and not following recommendations. I really recommend you to read the manual, especially the introduction to MVC.
Ext.regModel is deprecated as of version 4.0.0. Change your code as follows and save it to the file app/model/Region.js :
Ext.define('MyApp.model.Region', {
extends: 'Ext.data.Model',
fields: [
{name: 'id', type: 'integer'},
{name: 'name', type: 'string'}
]
});
In file app/store/Regions.js :
Ext.define('MyApp.store.Regions', {
extends: 'Ext.data.ArrayStore',
//id: notice that id is no longer necessary
model: 'Region',
//data: you load the store from the server, so the data is loaded automatically
autoLoad: true
})
Your combobox becomes:
xtype: 'combobox',
value: 'region',
store: 'Regions',
width: 135,
id: 'regionCombo',
editable: false,
valueField: 'id',
displayField: 'name'
I never used extjs before 4.2, but it seems the changes introduced with version 4 are important. It may be difficult to adopt the new paradigms. But I'm sure it radically simplifies your code. You certainly never will regret this step.
Also with the release of version 5.0, I think it's time to develop new habits and leave ExtJs 2.0 coding style behind.

You started off correctly, but you didn't specify which fields to use. Add the missing configuration :
store: regionStore,
valueField: 'id',
displayField: 'name'
For a combobox you can define a store inline as :
store: [[1, 'first option'], [2, 'second option']],
In this case you will not need to declare the value and the display field. They are implicit.

How to add ComboBox to settings gear menu in Rally app

Currently I'm working on an app that displays a chart of defects. The chart is to be filtered by a selection of checkboxes that the user can change around to fit his / her needs. These checkboxes are located in the gear menu of the app, under 'settings'. In App.js I have a function that looks like this:
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
This function works perfectly so far and displays the items I left out of the code [they're not important to the question]. The problem is that now I want to add a ComboBox into the same settings page with custom values. The box should have the text [Days, Weeks, Months, Quarters] inside that will further filter which defects to display in the chart. I tried changing the getSettingsFields function to the following:
getSettingsFields: function() {
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
});
return [
{
xtype: 'combobox',
fieldLabel: 'Date Range',
store: myStore,
displayField: 'range',
valueField: 'value'
},
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
Now when I run the app and click on the 'settings' button, everything disappears - even the field of checkboxes. Any explanation to why this is not working would be very helpful!

You're basically doing everything correctly- you've just stumbled upon a really subtle bug. The underlying issue is that there is an infinite recursion that occurs when the settings panel is attempting to clone the settings field config array due to the inclusion of the store. The following code will work around the issue:
{
xtype: 'rallycombobox',
storeConfig: {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
},
storeType: 'Ext.data.Store',
fieldLabel: 'Date Range',
displayField: 'range',
valueField: 'value'
}
It's basically the same as what you had but uses the rallycombobox instead and passes in storeType and storeConfig to get around the store cloning problem.

Populate ExtJS combobox with JSON

I am using ExtJS (3) and just trying to populate a combobox/drop down using records from the database that are being queried using JSON.
Here is my JSON call:
var projectDropDown = new Ext.data.Store({
autoLoad: true,
url: 'dropdown.json',
storeId: 'projectDropDown',
idProperty: 'ProjectID',
fields: [ 'ProjectID', 'ProjectName' ]
});
And then my combobox code:
{
xtype: 'combo',
id: 'ProjectName',
fieldLabel: 'Project Name',
valueField: 'ProjectID',
displayField: 'ProjectName',
store: projectDropDown,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Project...',
selectOnFocus:true
}
The JSON is returning my data like this:
[
{
"ProjectID":"1",
"ProjectName":"Mike's Test Project"
},
{
"ProjectID":"2",
"ProjectName":"My Second Test Project"
},
{
"ProjectID":"3",
"ProjectName":"My Third Project"
},
{
"ProjectID":"6",
"ProjectName":"More testing from me"
}
]
I think I am close, I just don't see what I am missing to make the connection.
Thanks for any assistance.

The first step I would do would be to output the store (or size of the store or something) to the console to see if the data is getting loaded properly into the store.
My guess would be that you need to enclose your JSON that is returned into some root object. Try giving your store a JSONReader with a root element specified like so:
var projectDropDown = new Ext.data.Store({
autoLoad: true,
url: 'dropdown.json',
storeId: 'projectDropDown',
reader: new Ext.data.JsonReader(
{
root: 'projects'
}),
idProperty: 'ProjectID',
fields: [ 'ProjectID', 'ProjectName' ]
});
Then change the JSON returned to look like this instead
{
"projects" : [
{"ProjectID":"1","ProjectName":"Mike's Test Project"},
{"ProjectID":"2","ProjectName":"My Second Test Project"},
....
]
}