Sencha Touch Splitview NestedList and getDetailCard - sencha-touch

Question

I've seen quite a few examples of a sencha touch app with a nestedList that creates a view within the getDetailCard method and all of that works fine. BUT I have not seen this implemented in an MVC setup. More specifically, a splitview MVC app where the nestedList is docked to the left and the detail pane to the right.
I can use setActiveItem to display a fullscreen detail view with the relevant data all day but when doing so, the left docked nestedlist is removed. How do I keep the split-view setup and update the detailView?
Controller: Products.js
/**
* #class Products
* #extends Ext.Controller
*/
Ext.regController('Products', {
// index action
index: function(){
if ( ! this.indexView){
this.indexView = this.render({
xtype: 'ProductIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
detail: function(options){
var record = options.params[0].attributes.record.data;
console.log(record);
if ( ! this.detailView){
this.detailView = this.render({
xtype: 'ProductDetail',
//data: record
});
//var detailsView = this.indexView.query('#detailsView')[0];
this.detailView.update(record);
}
//this.application.viewport.setActiveItem(this.detailView, options.animation);
}
});
Model: Product.js
Ext.regModel('Product', {
fields: [
{name: "id", type: "int"},
{name: "pid", type: "int"},
{name: "type", type: "string"},
{name: "status", type: "string"},
{name: "title", type: "string"},
{name: "content", type: "auto"},
{name: "date", type: "string"},
{name: "modified", type: "string"}
]
});
MVCApp.ProductStore = new Ext.data.TreeStore({
model: 'Product',
autoLoad: true,
storeId: 'ProductStore',
proxy: {
type: 'ajax',
id: 'ProductStore',
url: 'data/nestedProducts.json',
reader: {
type: 'tree',
root: 'items'
}
}
});
View: ProductIndexView.js
KCI.views.ProductIndex = Ext.extend(Ext.Panel, {
layout: 'hbox',
dockedItems: [
{
dock: 'left',
xtype: 'nestedlist',
width: '320',
height: '100%',
store: 'ProductStore',
displayField: 'title',
useToolbar: Ext.is.Phone ? false : true,
getDetailCard : function(record, parentRecord){
Ext.dispatch({
controller : 'Products',
action : 'detail',
historyUrl : 'Products/index',
params : [record, parentRecord]
});
}
}
],
items: [
{
xtype: 'ProductDetail',
itemId: 'detailView',
width: "704",
height: '100%'
}
]
});
Ext.reg('ProductIndex', KCI.views.ProductIndex);
View: ProductDetailView.js
KCI.views.ProductDetail = Ext.extend(Ext.Panel, {
scroll: 'vertical',
styleHtmlContent: true,
background: '#464646',
html: '<h1>Product Detail</h1>',
tpl: ['{title}<br />{id}<br />{pid}<br />{leaf}<br />{date}<br />{modified}<br />{type}<br />{status}<div>{content}</div>']
});
Ext.reg('ProductDetail', KCI.views.ProductDetail);

Answer 1

Try creating a sub viewport which will contain detail pane. Then you can just setActiveItem for that viewport instead of the application viewport.

Answer 2

I have the answer, this will slide the detail card out, update it and slide it back in.
In my Products controller, I needed to alter my detail view:
detail: function(options)
{
this.currentItem = options.params[0].attributes.record.data;
var rightPanel = this.application.viewport.query('#rightPanel')[0];
if ( ! this.detailView)
{
this.detailView = this.indexView.query('#detailView')[0];
this.dummyView = this.indexView.query('#dummyView')[0];
this.dummyView.on('activate', function()
{
this.detailView.update(this.currentItem);
rightPanel.setActiveItem(this.detailView, {type: 'slide'});
}, this);
}
rightPanel.setActiveItem(this.dummyView, {type: 'slide', reverse: true});
}
Then in my Product Index view, create a sub panel and a dummyview:
var rightPanel = new Ext.Panel({
layout: 'card',
xtype: 'rightPanel',
itemId: 'rightPanel',
items: [
{
xtype: 'ProductDetail',
itemId: 'detailView',
width: "704",
height: '100%',
html: 'right panel'
},
{
itemId: 'dummyView'
}
]
});
EDIT: Wanted to reference my source, and highly talented ST dev: CAM