textfields collapsed after sencha cmd build

Question

I am using the lastest sencha cmd for the build with ext-5.0.1. Everythings look good during the development status (http://www.imageupload.co.uk/5Med) but after the build. All the textfields collapsed like shown (http://www.imageupload.co.uk/5MeQ), and have no response to the changes in width, minWidth, flex... etc. And also the properties y and x are not functioning.

If someone had had similar situation before, please help, thx

My cmd is v5.0.3.324

Here are part of my code:

In my Main.js:

Ext.define('ExtTest2.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'ExtTest2.view.main.MainController',
        'ExtTest2.view.main.MainModel'
    ],

    xtype: 'app-main',

    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'fit'
    },

    itemId:'Stage'
});

MainController.js:

Ext.define('ExtTest2.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    requires: [
    ],

    alias: 'controller.main',

    init: function(){
        this.Start();
    },

    Start: function(){
        var data = {
          itemId: "Page_Login",
          xtype: "panel",
          items: [
            {
               padding: 30,
               layout:{
                 type: 'vbox',
                 align: 'center'
               },
               xtype: "fieldset",
               y: "30%",
               height: 150,
               items: [
                 {
                    xtype: "textfield",
                    itemId: "Textfield_Username",
                    fieldLabel: "用戶名稱",
                    labelStyle: "color:#FFFFFF"
                 },
                 {
                    fieldLabel: "密碼",
                    itemId: "Textfield_Password",
                    labelStyle: "color:#FFFFFF",
                    xtype: "textfield"
                 },
                 {
                    itemId: "Button_Login",
                    text: "登入",
                    width: 100,
                    xtype: "button"
                 }
               ]
            }
          ] 
        };
        var container = Ext.ComponentQuery.query('#Stage')[0];
        container.removeAll();
        container.add(data);
        container.updateLayout();
    }
});

What is the exact version of Cmd? Also, provide please some code so that somebody can reproduce your issue. — Saki

Saki Saki · Accepted Answer · 2014-12-16T09:56:50

It is overnested because you add unnecessary container to app-main containing the fields.
It is very unusual to manipulate views from view controller like that - create a class for the fieldset, give it an alias (xtype) and simply instantiate that. Cramming controller handlers together with view definitions shall inevitably lead to Spaghetti Code.
You use vbox layout, without any flex or height to hold form fields. Form fields behave best in anchor layout that is the default for Ext.form.Panel.

textfields collapsed after sencha cmd build

1 Answers