PDA

View Full Version : vbox layout and dynamically added panels



Misiu
9 Aug 2013, 2:26 AM
Hi all Sencha users.
I'm trying to build simple reporting application.
Main idea is to let user to view reports that he wants (similar to adding widgets to dashboard)
I've created simple demo app, I've added first report to my dashboard, but when I try to add another everything stops working.

My sample report panel is defined as so:



Ext.define('MyApp.Components.Reports.Weekly', {
extend: 'Ext.panel.Panel',
//alias: 'widget.weekly',
split: true,
border: true,
title: 'Weekly report',
height: 200,
layout: 'fit',
collapsible: true,
closable: true,
initComponent: function () {
var me = this;

Ext.apply(me, {
tbar: [{
xtype: 'datefield',
fieldLabel: 'Start',
id: 'startdt',
width: 170,
labelWidth: 65,
listeners: {
render: function (datefield) {
var currentYear = new Date().getFullYear();
datefield.setValue(new Date(currentYear + '-01-01'));
}
}
}, {
xtype: 'datefield',
fieldLabel: 'End',
id: 'enddt',
width: 160,
labelWidth: 50,
maxValue: new Date(),
listeners: {
render: function (datefield) {
datefield.setValue(new Date());
}
}
}, {
text: 'Reload',
scope: this,
handler: function () {
console.log('reload');
}
}]
});
me.callParent(arguments);
}});


My main container that is responsible for storing reports (panels):



Ext.define('MyApp.Components.Reports', {
extend: 'Ext.panel.Panel',
alias: 'widget.weekly',
split: true,
id: 'reports',
border: true,
region: 'center',
title: 'Reports module',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
bodyPadding: 5,
initComponent: function () {
var me = this;
this.weekly = Ext.create("MyApp.Components.Reports.Weekly"),
//this.weekly2 = Ext.create("MyApp.Components.Reports.Weekly"),
Ext.apply(me, {
items: [this.weekly] //, this.weekly2]
});
me.callParent(arguments);
}});

I'm able to add new report panel below my existing, but it isn't visible till I resize my application.

My questions are:
How can I fix layout problem? I would like to be able to add new panels to my main panel and be able to collapse/expand/close them.
How to add scrollbar to my main panel? If I add more than 3 panels I wan't be able to see last.
How to prevent user from adding 2 same panels? I would like to be able to add only one instance for every type I have.
How can I make this more MVC friendly? I have folder structure, models in models folder, stores in stores. But I don't know how should I add controllers and views dynamically.
With my approach I can easily add new panel, but I don't know how to do that using MVC.
What would be best mechanism for storing panels informations? I probably should add method to my main Panel called "addPanel" and in it store new panel name, so when I start application later I will have same panels on start.
Here is working copy of my project to play with: http://jsfiddle.net/Misiu/HWZNc/
(http://jsfiddle.net/Misiu/HWZNc/)My main problem is making this more MVC, because I would like to learn MVC and use CMD tool in build process.

I found Portal and GroupTabs examples, they might help answering some of my questions, but they aren't build using MVC.