PDA

View Full Version : Need an example MVC check box selection in tree panel



trcampion
14 Feb 2012, 8:44 PM
I'm trying to get my head around how to do things the mvc way with extjs-4 and am not able to pull the pieces together.

I'm not sure where to put everything. I have a basic layout in app.js using a viewport container and would like to use a tree panel with check box to display come customer data. Initially I thought I would try to mock this up using static data and once that was sorted I would move to pulling the data from a database.

I cant seem to get a tree control to appear in the panel where I would like it or at all for that matter. The API examples display at http://docs.sencha.com/ext-js/4-0/#!/example/tree/check-tree.html looks like what im after but its not in MVC. Obviously I want to take advantage of all the goodness which comes with mvc but it seems the vast majority of examples in the API docs are not examples using mvc approach. or am I missing something? How do I translate the API examples into something I can cobble together for my app.

Any training pointers or examples. If its not already obvious I'm new to extjs so any help is greatly appreciated.

mitchellsimoens
15 Feb 2012, 6:15 AM
MVC is just a means of listening to events and acting upon them. Everything else is the same as if you were doing it within classes and not using MVC. You can either have your tree as an item of your viewport or you can add it as an item.

trcampion
15 Feb 2012, 7:21 AM
Thanks for the reply, but can you show me as an example? I have this in app.js


Ext.application({
name: 'NEAT',

appFolder: 'app',



launch: function() {
Ext.create('Ext.container.Viewport', {
width: 500,
height: 400,
title: 'Border Layout',
layout: 'border',
items: [
{
//title: 'North Region is resizable',
region: 'north', // position for region
id: 'my_north',
xtype: 'panel',
contentEl: 'north',
height: 75,
autoEl: {
tag: 'div',
}
//split: true, // enable resizing
//margins: '0 5 5 5'
},{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
collapsible: true, // make collapsible
collapsed : true,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'Customer Details',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
split: true, // enable resizing
id: 'west-region-container',
//layout: 'fit',
items: [
{
//title: 'North Region is resizable',
title: 'Select Customers',
height:300,
//store: customer,
//split: true, // enable resizing
//margins: '0 5 5 5'
}]
},{
// xtype: 'panel' implied by default
title: 'east Region is collapsible',
region:'east',
xtype: 'panel',
margins: '5 5 0 0', // t r b l
width: 200,
collapsible: true, // make collapsible
collapsed : true,
split: true, // enable resizing
id: 'east-region-container',
layout: 'fit'
},{
//title: 'Center Region',
region: 'center', // center region is required, no width/height specified
title: 'Network Information',
layout: 'fit',
tbar : toolbar,
xtype: 'panel',
margins: '5 0 0 0',
items: [{
//region: 'center',
xtype: 'tabpanel',
tabPosition: 'bottom',
items: [{
title: 'Main',
html: 'this is the main tab'
}, {
title: 'Device',
html: 'this is the device tab'
}
}]
}]
}],


renderTo: Ext.getBody()


})
}

});


I would like the tree to appear in the west panel. what do I put in app.js? a controller at the top and then alias it in the west panel items. How about the data? Im assuming it goes in model, with a reference to a view, and somehow identified in the controller.

Im a little confused at how to glue it all together.

trcampion
20 Feb 2012, 7:43 AM
Can anyone point me in the direction of crash course for extjs? mvc ideally?