Changing the Detail Container in a NestedList? - sencha-touch-2

Question

In a small program that I have, I'm trying to have custom containers for every leaf node of my Nested List.
Here are a couple arbitrary example containers that I'm trying to test with:
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #a9a9a9;',
// flex: 1,
items: [{
html: 'Detail Container1'
}]
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #c9c9c9;',
// flex: 1,
items: [{
html: 'Detail Container2',
flex: 1
}, {
xtype: 'button',
text: 'Hit me!',
flex: 1
}]
});
How can I switch in the new containers when the user clicks on the leaf node?
This action should happen in onLeafItemTap(). Btw the initial container (#2) isn't showing at the moment. Is this a layout issue?
Here's some idea of what the screen should look like:
Complete source:
Ext.Loader.setConfig({
enabled: true
});
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #a9a9a9;',
// flex: 1,
items: [{
html: 'Detail Container1'
}]
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #c9c9c9;',
// flex: 1,
items: [{
html: 'Detail Container2',
flex: 1
}, {
xtype: 'button',
text: 'Hit me!',
flex: 1
}]
});
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
Ext.define('Sencha.view.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
layout: {
type: 'hbox'
},
initialize: function() {
this.treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [{
text: 'Containers',
items: [{
text: 'Detail #1',
leaf: true
}, {
text: 'Detail #2',
leaf: true
}]
}]
}
});
this.detailContainer = Ext.create("DetailContainer2", {});
this.nestedList = Ext.create('Ext.NestedList', {
docked: 'left',
width: 300,
flex: 1,
store: this.treeStore,
detailCard: true,
detailContainer: this.detailContainer,
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
});
this.setItems([this.detailContainer, this.nestedList]);
},
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
// nestedList.setDetailContainer(Ext.create("DetailContainer1", {}))
// detailCard.setHtml(record.get('text') + "...");
}
});
Ext.application({
launch: function() {
var container = Ext.create("Ext.Container", {
layout: {
type: 'hbox'
},
items: [{
xtype: 'mainview'
}]
});
Ext.Viewport.add(container);
}
});

Answer 1

Finally I've figured out the proper way to solve your problem.
Some explanations:
If you want to display "customized detailContainer" at the right side of your hbox, it's quite obvious that you should disable detailCard config for your Ext.NestedList because it's designed to display inline (i.e. take place of your Ext.NestedList).
When using Ext.define, everything should be included in config (except extend, xtype, alias, id, so in this case, layout has to be put in config).
flex should be defined in config as well.
At leafitemtap event, simply update your detailContainer config and remove/add it again as it would not be updated dynamically.
Please take a look at modified code snippet below, it works perfectly for me.
Ext.Loader.setConfig({ enabled: true });
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
config: {
flex: 1,
layout: {
type: 'vbox'
},
style: 'background-color: #a9a9a9;',
items: [
{html: 'Detail Container1'}
]
}
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
config: {
flex: 1,
layout: {
type: 'vbox'
},
style: 'background-color: #c9c9c9;',
items: [
{html: 'Detail Container2', flex: 1},
{xtype: 'button', text: 'Hit me!', flex: 1}
]
}
});
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
Ext.define('Sencha.view.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
id: 'mainview',
config: {
layout: {
type: 'hbox'
},
},
initialize: function() {
this.treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Containers',
items: [
{ text: 'Detail #1', leaf: true },
{ text: 'Detail #2', leaf: true }
]
}
]
}
});
this.detailContainer = Ext.create("DetailContainer2");
this.nestedList = Ext.create('Ext.NestedList', {
flex: 1,
store: this.treeStore,
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
});
this.setItems([this.nestedList, this.detailContainer]);
},
onLeafItemTap: function(nestedList, list, index, node, record, e) {
mainview = Ext.getCmp('mainview');
if (index==0) {
mainview.detailContainer = Ext.create("DetailContainer1");
} else {
mainview.detailContainer = Ext.create("DetailContainer2");
}
mainview.removeAt(1);
mainview.add(mainview.detailContainer);
}
});
Ext.application({
launch: function() {
Ext.Viewport.add(
Ext.create("Ext.Container", {
layout: {
type: 'card'
},
items: [
{ xtype : 'mainview'}
]
}));
}
});