Results 1 to 8 of 8

Thread: 0.94 FormPanel Floating

  1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default 0.94 FormPanel Floating

    In 0.93 works fine, i have a panel > tabpanel > formpanel structure if i set the formpanel floating the formpanel is not show, the centered config also dont work, i apply in this way:

    if (Ext.is.Phone) {
    formLogin.fullscreen = true;
    } else {
    Ext.apply(formLogin, {
    autoRender: true,
    floating: true,
    modal: true,
    centered: true,
    hideOnMaskTap: false,
    height: 385,
    width: 480
    });
    }

    I've noticed that there is no more floating config for formapanel in the docs, but there is a setFloating method, your form demo is still working but it's not contained in another component

  2. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    The option is now called floatable.

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    Hi Evan, thanks for quick response, this a modified version of forms example, with the form contained in a panel, why i dont get the same result in layout (i'm testing on last version of chrome), where i'm wrong (note that your example is still using floating and not floatable):

    Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

    Ext.regModel('User', {
    fields: [
    {name: 'name', type: 'string'},
    {name: 'password', type: 'password'},
    {name: 'email', type: 'string'},
    {name: 'url', type: 'string'},
    {name: 'rank', type: 'string'},
    {name: 'value', type: 'int'},
    {name: 'enable', type: 'boolean'},
    {name: 'cool', type: 'boolean'},
    {name: 'color', type: 'string'},
    {name: 'team', type: 'string'},
    {name: 'secret', type: 'boolean'}
    ]
    });

    Ext.regModel('Ranks', {
    fields: [
    {name: 'rank', type: 'string'},
    {name: 'title', type: 'string'}
    ]
    });

    var ranksStore = new Ext.data.JsonStore({
    data : [
    { rank : 'master', title : 'Master'},
    { rank : 'padawan', title : 'Student'},
    { rank : 'teacher', title : 'Instructor'},
    { rank : 'aid', title : 'Assistant'}
    ],
    model : 'Ranks',
    autoLoad : true,
    autoDestroy : true
    });

    var formBase = {
    scroll: 'vertical',
    url : 'postUser.php',
    standardSubmit : false,
    items: [
    {
    xtype: 'fieldset',
    title: 'Personal Info',
    instructions: 'Please enter the information above.',
    defaults: {
    required: true,
    labelAlign: 'left'
    },
    items: [{
    xtype: 'textfield',
    name : 'name',
    label: 'Name',
    autoCapitalize : false
    }, {
    xtype: 'passwordfield',
    name : 'password',
    label: 'Password'
    }, {
    xtype: 'textfield',
    name : 'disabled',
    label: 'Disabled',
    disabled: true
    }, {
    xtype: 'emailfield',
    name : 'email',
    label: 'Email',
    placeHolder: '[email protected]'
    }, {
    xtype: 'urlfield',
    name : 'url',
    label: 'Url',
    placeHolder: 'http://google.com'
    }, {
    xtype: 'checkbox',
    name : 'cool',
    label: 'Cool'
    }, {
    xtype: 'spinnerfield',
    name : 'spinner',
    label: 'Spinner'
    }, {
    xtype: 'select',
    name : 'rank',
    label: 'Rank',
    valueField : 'rank',
    displayField : 'title',
    store : ranksStore
    }, {
    xtype: 'hidden',
    name : 'secret',
    value: false
    }, {
    xtype : 'textarea',
    name : 'bio',
    label : 'Bio',
    maxLength : 60,
    maxRows : 10
    }, {
    xtype: 'slider',
    name : 'height',
    label: 'Height'
    }, {
    xtype: 'toggle',
    name : 'enable',
    label: 'Security Mode'
    }, {
    xtype: 'radio',
    name: 'team',
    label: 'Red Team',
    inputValue : 'redteam'
    }, {
    xtype: 'radio',
    name: 'team',
    label: 'Blue Team',
    inputValue: 'blueteam'
    }]
    }, {
    xtype: 'fieldset',
    title: 'Favorite color',
    defaults: { xtype: 'radio' },
    items: [
    { name : 'color', label: 'Red', inputValue : 'red' },
    { name : 'color', label: 'Blue' , inputValue : 'blue'},
    { name : 'color', label: 'Green' , checked : true, inputValue : 'green'},
    { name : 'color', label: 'Purple' , inputValue : 'purple'}
    ]
    }, {
    xtype: 'fieldset',
    title: 'HTML5',
    items: [{
    xtype: 'numberfield',
    name: 'number',
    label: 'Number',
    maxValue : 20,
    minValue : 2
    }, {
    xtype: 'emailfield',
    name: 'email',
    label: 'Email'
    }, {
    xtype: 'urlfield',
    name: 'url',
    label: 'URL'
    }]
    }, {
    xtype: 'fieldset',
    title: 'Single Select (in fieldset)',
    items: [{
    xtype: 'select',
    name: 'options',
    options: [
    {text: 'This is just a big select', value: '1'},
    {text: '2', value: '2'}
    ]
    }]
    }, {
    xtype: 'fieldset',
    title: 'Single Text (in fieldset)',
    items: [{
    xtype: 'textfield',
    name: 'single_text'
    }]
    }, {
    xtype: 'fieldset',
    title: 'Single Toggle (in fieldset)',
    items: [{
    xtype: 'toggle',
    name: 'single_toggle',
    value : 1
    }]
    }, {
    xtype: 'fieldset',
    title: 'Single Slider (in fieldset)',
    items: [{
    xtype: 'slider',
    name: 'single_slider',
    value : 60
    }]
    }
    ],
    listeners : {
    submit : function(form, result){
    console.log('success', Ext.toArray(arguments));
    },
    exception : function(form, result){
    console.log('failure', Ext.toArray(arguments));
    }
    },

    dockedItems: [
    {
    xtype: 'toolbar',
    dock: 'bottom',
    items: [
    {
    text: 'Load Model',
    ui: 'round',
    handler: function() {
    formBase.user = Ext.ModelMgr.create({
    'name' : 'Akura',
    'password': 'secret',
    'email' : '[email protected]',
    'url' : 'http://extjs.com',
    'single_slider': 20,
    'enable' : 1,
    'cool' : true,
    'team' : 'redteam',
    'color' : 'red',
    'rank' : 'padawan',
    'secret' : true,
    'bio' : 'Learned the hard way !'
    }, 'User');

    form.loadModel(formBase.user);
    }
    },
    {xtype: 'spacer'},
    {
    text: 'Reset',
    handler: function() {
    form.reset();
    }
    },
    {
    text: 'Save',
    ui: 'action',
    handler: function() {
    if(formBase.user){
    form.updateModel(formBase.user, true);
    }
    form.submit({
    waitMsg : {message:'Submitting', cls : 'demos-loading'}
    });
    }
    }
    ]
    }
    ]
    };

    if (Ext.is.AndroidOS) {
    formBase.items.unshift({
    xtype: 'component',
    styleHtmlContent: true,
    html: '<span style="color: red">Forms on Android are currently under development. We are working hard to improve this in upcoming releases.</span>'
    });
    }

    if (Ext.is.Phone) {
    formBase.fullscreen = true;
    } else {
    Ext.apply(formBase, {
    autoRender: true,
    floating: true,
    modal: true,
    centered: true,
    hideOnMaskTap: false,
    height: 385,
    width: 480
    });
    }


    var mainpanel = new Ext.Panel({
    id: 'mainpanel',
    fullscreen: true,
    ui: 'dark',
    layout: 'card',
    dockedItems: [toolbar],
    items: [form = new Ext.form.FormPanel(formBase)]
    });
    }
    });

  4. #4
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Don't add the form to the panel, it serves no purpose. Just show the form.

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    Yes in this case, it serve no purpose, but in a real app i want to have formpanel contained in tabpanel, so you are telling me that i cant apply any config to a formpanel contained in another component?

  6. #6
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    No, I'm saying that it makes no sense to have a floating item inside an empty fullscreen panel.

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    Ok for floating, but if i put this code to the previus example:

    if (Ext.is.Phone) {
    formBase.fullscreen = true;
    } else {
    Ext.apply(formBase, {
    centered: true,
    height: 385,
    width: 480
    });
    }

    i expect to have a formpanel centered and with the given dimensions, the form is show fullscreen, this for sure is working in 0.93, what i'm trying to explain is everything you apply is not working

  8. #8
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    I don't really know what you're saying. Again, there's no point nesting any floating item inside something else, because it's floating!

Similar Threads

  1. Need a floating sidepanel
    By talha06 in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 14 Jun 2010, 12:29 AM
  2. Left Floating
    By YargicX in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 6 Oct 2008, 6:19 AM
  3. Floating panels
    By sprost in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Aug 2008, 2:19 PM
  4. Position a non-floating formPanel
    By jameslenig in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 22 May 2008, 7:54 PM
  5. floating Alert
    By prashantshah09 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 17 Mar 2008, 3:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •