How to get all values from a form? - extjs

Question

I am definitely sure doing something wrong which I didn't resolve. I have a form component which are includes several textfield, radio button as well as windows. If I used the following code :
console.log(Discounts.getForm().getValues());
// Discount is form name which is defined like below
var Discounts = Ext.create('Ext.form.Panel', {
...
}
I can see all values except grid panel which is included window component ( to tell the truth I can't see all other window values!).
The component tree like below :
+-- FORM PANEL ( layout card )
|
+-- CARD LAYOUT - 1
| |
| +- COMBOBOX
| +- TEXTFIELD
|
+-- CARD LAYOUT - 2
| |
| +- WINDOW
| |
| +- GRID PANEL
|
+-- CARD LAYOUT - 3
| |
| +- RADIO GROUP
Do you have any idea what I am doing wrong?
For instance, I would like to get winArticle window field values as well as Discount forms together.
PS : The code is very large so that I putted JSFiddle.
Source

Answer 1

You have a formpanel in a formpanel, by giving the child formpanel an itemId and using component queries like Discounts.down('#yourchildformpanelitemid').getValues() you could probably get its values...
However, since your code in no way maintainable, my advice, refactor/restructure your code and use MVC structure. From Sencha:
Large client side applications have always been hard to write, hard to
organize and hard to maintain. They tend to quickly grow out of
control as you add more functionality and developers to a project. Ext
JS 4 comes with a new application architecture that not only organizes
your code but reduces the amount you have to write.
You will need to restructure your code and define your components separately. this will make your app maintainable. In your case the formpanel you create would be a separate component and have its own controller, thus enabling you to use the same formpanel elsewhere.
Also, read the following article from Sencha, ExtJS practices to avoid:
http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/
Most of these tips (if not all) are applicable to your code.
For example, you are nesting components like crazy. Most of the nesting is unnecessary. For example:
...
items: [
{
xtype: 'form',
items: new Ext.Panel({
items: [
{
xtype: 'fieldset',
...
xtype: 'form' creates a form panel, why on earth create a panel inside?
More on ExtJS MVC Architecture:
http://docs.sencha.com/extjs/4.2.0/#!/guide/application_architecture