View Full Version : Model, Store, BelongsTo Association, xTemplate Example

25 Apr 2011, 2:01 AM
I am stuck at how to use associated data for a belongsTo association in a template. Does anyone know working examples/tutorial that show...

1) How to populate a store with JSON including associated data?

2) What Panel/Component types should/can be used? (DataView?, List?)

2) How to use associated data in a templates? ({Submodel.param} ?)

I was unable to find good working examples on the entire flow from getting server-side data, populating a store with data (includign associated data), creating view and using the data (including associated data).

25 Apr 2011, 6:23 AM
Review the demos in the examples directory, and definitely heavily review the Data API docs as most of the answers are there.

You need to fist understanding the concepts of creating valid JSON on the server and getting that data to client and loading into a model. Most of those details happen automatically when you load a store with an assigned reader so it may help you to simply request a JSON file and load into a client model on the succes callback to gain a solid understanding of that process. Then, when it comes to loading relational models, you have to ensure that your server side JSON is properly organized with object arrays for your associations that you have setup to read them into object collection properties on your root model. I typically ensure that my server data classes match my client models to avoid confusion, but you can map the names if they are different.

Again, the biggest hurdle is organizing the JSON properly and getting the reader to successfully read the JSON into the model.

25 Apr 2011, 6:38 AM
Yes, I am familiar with this process from other frameworks in other langauges. However, I cannot get this to work in ST. I find that none of the examples really shows the use of associations well. Therefore I am asking for examples.

Maybe you could submit some code snippets illustrating what you wrote?

25 Apr 2011, 7:44 AM
Here is a quick grab and paste of a ProductList dataview that uses a store to retrieve data from th server and display in the dataview. Look through this and see if it can help you. I hope it gets you somewhere...little busy so I gotta jump back on some work. If you have more questions, I'll try to get back to you as soon as I can.

Dataview with Store:

itemId: 'productList',
xtype: 'dataview',
scroll: false,
loadingText: null,
cls: 'productItem_list_container',
store: new Ext.data.Store({
storeId: 'storeProductList',
model: 'Product',
pageSize: this.pageSize,
autoLoad: {
limit: this.pageSize
proxy: {
type: 'ajax',
url: 'Sencha/GetProductList',
extraParams: { url: this.listUrl },
limitParam: 'pageSize',
reader: {
type: 'json',
root: 'Products'
listeners: {
scope: this,
beforeload: function (store, op) {
// Perform UI setup tasks before data retrieval;

load: function (store, recs, success) {
// Get data object that holds returned JSON
var jsonResult = store.proxy.reader.jsonData;

...UI stuff

tpl: new Ext.XTemplate(
'<div class="productlist_outer_container">',
'<div class="productlist_inner_container">',
'<div class="table">',
'<tpl for=".">',
'<div class="row productlist_item_container {[xindex % 2 === 0 ? "row_even" : "row_odd"]}">',
'<div class="cell" style="width: 81px; height: 82px; padding: 5px">',
'<div class="productlist_image_wrapper" style="width: 82px; height: 82px"><img class="productlist_image" src="{ThumbUrl}" alt="{Name}" title="{Name}" width="80" height="80" /></div>',
'<div class="cell" style="width: auto;">',
'<div class="row productlist_text text_bold">{[this.shortName(values.Name)]}</div>',
'<div class="row productlist_text">{[this.shortDesc(values.Description)]}</div>',
'<div class="row productlist_text text_bold">{[this.shortMfg(values.MfgInfo.Name)]}</div>',
'<div class="row productlist_text">Our Part#&nbsp;{BasePartNumber}</div>',
'<tpl if="values.ListPrice != values.OurPrice && values.ListPrice != 0">',
'<div class="row productlist_text text_bold_darker">List Price:&nbsp;{[mmEngine.formatCurrency(values.ListPrice)]}</div>',
'<div class="row productlist_text text_bold text_red">Our Price:&nbsp;{[mmEngine.formatCurrency(values.OurPrice)]}</div>',
'<div class="cell" style="text-align: center; vertical-align: middle;">',
'<img src="UI/Assets/Images/arrow.gif" alt="Select Product" title="Select Product" width="8" height="11" />',
// XTemplate function definitions
compiled: true,
// member functions:
shortName: function (name) {
return (name.length > 50 ? name.substring(0, 47) + '...' : name);
shortDesc: function (desc) {
return (desc.length > 55 ? desc.substring(0, 52) + '...' : desc);
shortMfg: function (mfg) {
return (mfg.length > 25 ? mfg.substring(0, 22) + '...' : mfg);
showProductNotificationImage: function (values) {
var divStatus = '';
if (values.HasFreeShipping) {
divStatus = '<div class="productdetail_notification_div" style="display: block">Free Shipping</div>';
else if (values.HasVideo) {
divStatus = '<div class="productdetail_notification_div" style="display: block">Watch the Video!</div>';
else if (values.IsExclusive) {
divStatus = '<div class="productdetail_notification_div" style="display: block">Online Exclusive</div>';
else {
divStatus = '<div class="productdetail_notification_div" style="display: none"></div>';
return divStatus;
itemSelector: 'div.productlist_item_container',
//selectedItemCls: 'itemSelected',
listeners: {
itemtap: function (dv, index, item, e) {
var ds = dv.getStore();
rec = ds.getAt(index);

// Get full product detail item

Product JSON returned from server:

BasePartNumber: "AUR-CORNER-CHA"
CatalogUrl: "http://www.company.com/Mobile/Acoustic-Materials/Acoustic-Foam/Auralex-Acoustics/MAXCOUPLERCHA.xht…"
Description: ""
HasFreeShipping: false
HasVideo: false
Id: "edb15a91-6741-4ed4-a7ce-55b253706f5e"
Images: Array[0]
length: 0
__proto__: Array[0]
IsExclusive: false
ItemNoticeIcon: ""
ItemNoticeText: ""
ListPrice: "79"
MfgInfo: Object
LogoUrl: null
Name: "Auralex Acoustics"
ProductListUrl: null
__proto__: Object
Name: "90-degree Corner Couplers for Auralex Max-Wall Panels"OurPrice: "69"
PartNumber: ""
Promotion: Object
SelectedPartNumber: ""
ShortDescription: ""
SpecialPrice: ""
StockStatusIcon: ""
ThumbUrl: "http://www.company.com/Mobile/productImage/75X75/AUR-CORNER-CHA.JPG"
Weight: ""

Product Model:

Ext.regModel("Product", {
idProperty: "PartNumber", //defaults to 'id'
fields: [
{ name: "Id", type: "string" },
{ name: "PartNumber", type: "string" },
{ name: "SelectedPartNumber", type: "string" },
{ name: "Name", type: "string" },
{ name: "Description", type: "string" },
{ name: "ShortDescription", type: "string" },
{ name: "CatalogUrl", type: "string" },
{ name: "ThumbUrl", type: "string" },
{ name: "BasePartNumber", type: "string" },
{ name: "Weight", type: "string" },

{ name: "ListPrice", type: "string" },
{ name: "OurPrice", type: "string" },
{ name: "SpecialPrice", type: "string" },

{ name: "IsExclusive", type: "boolean" },
{ name: "HasFreeShipping", type: "boolean" },
{ name: "HasVideo", type: "boolean" },

{ name: "StockStatusIcon", type: "string" },
{ name: "ItemNoticeIcon", type: "string" },
{ name: "ItemNoticeText", type: "string" },

{ name: "Promotion", type: "auto" },
{ name: "MfgInfo", type: "auto" },


hasMany: { model: 'Variant', name: 'Variants'},
hasMany: { model: 'Image', name: 'Images' }

Image Model:

Ext.regModel("Image", {
idProperty: "Id", //defaults to 'id'
fields: [
{ name: "Id", type: "string" },
{ name: "Type", type: "string" }
belongsTo: 'Product',
hasMany: {model: 'Size', name: 'Sizes'}

25 Apr 2011, 8:14 AM
Many thanks so far!