I'm trying to call 2 values from my store, and set it inside the styles
in a div
which I put it in a html:
item. The store loads the data from a web API, which is working fine(I've tested using fiddler and the return response is correct) but I cant get the data in the store to work inside the html item.
Below is my view:
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
requires:['myapp.store.Style'],
items: [
{
id: 'firstpage',
title: 'Welcome',
store: 'styleStore',
styleHtmlContent: true,
scrollable: true,
items: [
{
html: ['<div id="testStr1" style="font-style:{FontStyle}; color:{Color};">',
'This is a test string.',
' Go to the settings to change the style',
'</div>'
].join("")
}
]
},
}
]
}
My Store:
Ext.define('myapp.store.Styles', {
extend: 'Ext.data.Store',
requires:[
'myapp.model.Style'
],
config: {
autoLoad: true,
model: 'myapp.model.Style',
storeId: 'styleStore',
clearOnPageLoad:false,
proxy:
{
type: 'ajax',
listeners: {
exception:{
fn: function(pxy, response, operation, options){console.log("We've got a problem...");}
}
},
url: 'http://localhost/styleapi/api/styles',
reader: {
type: 'json',
rootProperty: 'data',
}
}
}
});
My model:
Ext.define('myapp.model.Style', {
extend: 'Ext.data.Model',
fields:[
{
name: 'Id',
type: 'int'
},
{
name: 'FontStyle'
},
{
name: 'Color'
},
],
proxy: {
type: 'rest',
url: 'http://localhost/styleapi/api/styles'
}
});
A few issues here...
First, your main class, myapp.view.Main
, is nesting items inside it, and those items are not configured correctly. Your items: ...
should be inside of config
, and there should be an xtype
for each item, if you want the item to not be the default type of container
. In your current code, you have an items: ..
config on your first item, where you are putting html
. This results in a nested component, which is not what you are intending here.
In addition, you are using html
, when you really want to use a template. When you have a fixed set (or object) of data, you can use a component
with tpl
and data
; when using a store
for the data, you would use a dataview
with an itemTpl
config, which will repeat that template for each item in the store. Currently, your top-level item is defaulting to a container
, where you are using a store
config, which won't do anything at the moment.
So, steps to fix:
config
propertydataview
html
out of the nested item and into an itemTpl
property as an XTemplate (i.e. itemTpl: new Ext.XTemplate('<div ...')
)