1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    dmartin is on a distinguished road

      0  

    Default Answered: 4.1.1 Multiselect Scroll Issue

    Answered: 4.1.1 Multiselect Scroll Issue


    Hi,

    I did tarted few weeks ago to use Ext Js with several forms and store, having issue with a multiselect field. The scroll is not displayed and field sometime expand to the form size when I click into.

    I did try setting autoScroll and overflowXY without sucess ...

    Would appreciate some advice ...

    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', 'lib/ext/ux');

    Ext.require([
    'Ext.form.*',
    'Ext.Img',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.tip.QuickTipManager',
    'Ext.ux.form.MultiSelect'
    ]);

    Ext.onReady(function() {

    g_imgHelp = $('accountHelp');
    g_verifHelp = $('verifHelp');

    // if loggin, we show the account creation
    if(!g_info) {
    g_verifHelp.setHeight(10);
    create_account();
    }

    if(g_info != null){
    if(g_info.Status == 'C'){
    Ext.destroy(Ext.getCmp('tip_account'));
    g_imgHelp.setHeight(10);
    g_verifHelp.setHeight(530);

    verify_account()
    return;
    }

    if(g_info.Status == 'A'){
    Ext.destroy(Ext.getCmp('tip_account'));
    g_imgHelp.setHeight(10);
    g_verifHelp.setHeight(10);

    display_account()
    return;
    }
    }


    });

    function create_account(){

    Ext.tip.QuickTipManager.init();

    // Set up a model to use in our Store
    Ext.define('Fonc', {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'FonctionId', type: 'int'},
    {name: 'Fonction', type: 'string'}
    ]
    });

    var myFonc = Ext.create('Ext.data.Store', {
    model: 'Fonc',
    async: false,
    proxy: {
    type: 'ajax',
    url: 'php/ajax_get_fonction.php',
    reader: {
    type: 'json',
    root: 'items'
    }
    },
    autoLoad: true,
    buffered: false
    });

    // Set up a model to use in our Store
    Ext.define('Act', {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'ActiviteId', type: 'int'},
    {name: 'Activite', type: 'string'}
    ]
    });

    var myAct = Ext.create('Ext.data.Store', {
    model: 'Act',
    async: false,
    proxy: {
    type: 'ajax',
    url: 'php/ajax_get_activite.php',
    reader: {
    type: 'json',
    root: 'items'
    }
    },
    autoLoad: true,
    buffered: false
    });



    var formPanel = Ext.widget('form', {
    renderTo: 'col1',
    id:'tip_account',
    frame: true,
    width: 350,
    margin: '0 0 0 40',
    // padding: {0 0 0 0},
    bodyPadding: 10,
    bodyBorder: false,
    title: 'Créer un compte Publilex',

    defaults: {
    anchor: '100%'
    },
    fieldDefaults: {
    labelAlign: 'left',
    msgTarget: 'none',
    invalidCls: '' //unset the invalidCls so individual fields do not get styled as invalid
    },

    /*
    * Listen for validity change on the entire form and update the combined error icon
    */
    listeners: {
    fieldvaliditychange: function() {
    this.updateErrorState();
    },
    fielderrorchange: function() {
    this.updateErrorState();
    }
    },

    updateErrorState: function() {
    var me = this,
    errorCmp, fields, errors;

    if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
    errorCmp = me.down('#formErrorState');
    fields = me.getForm().getFields();
    errors = [];
    fields.each(function(field) {
    Ext.Array.forEach(field.getErrors(), function(error) {
    errors.push({name: field.getFieldLabel(), error: error});
    });
    });
    errorCmp.setErrors(errors);
    me.hasBeenDirty = true;
    }

    // document.getElementById('ext-gen1076').style.height = "";

    },

    items: [{
    xtype: 'textfield',
    name: 'Prenom',
    fieldLabel: 'Prénom',
    maxLenght:50,
    allowBlank: false,
    minLength: 2
    },{
    xtype: 'textfield',
    name: 'Nom',
    maxLenght:50,
    fieldLabel: 'Nom',
    allowBlank: false,
    minLength: 2
    }, {
    xtype: 'textfield',
    width: 80,
    maxLenght:50,
    id:'email',
    name: 'email',
    fieldLabel: 'Email',
    vtype: 'email',
    allowBlank: false
    }, {
    xtype: 'textfield',
    id: 'password1',
    name: 'password1',
    fieldLabel: 'Mot de passe',
    inputType: 'password',
    style: 'margin-top:15px',
    allowBlank: false,
    minLength: 8
    }, {
    xtype: 'textfield',
    name: 'password2',
    fieldLabel: 'Confirmation',
    inputType: 'password',
    allowBlank: false,
    /**
    * Custom validator implementation - checks that the value matches what was entered into
    * the password1 field.
    */
    validator: function(value) {
    var password1 = this.previousSibling('[name=password1]');
    return (value === password1.getValue()) ? true : 'Les mots de passe ne sont pas identique.'
    }
    },{
    xtype: 'textareafield',
    grow: true,
    maxLenght: 100,
    name: 'adresse',
    fieldLabel: 'Adresse',
    allowBlank: false,
    style: 'margin-top:15px',
    minLength: 6
    },{
    xtype: 'textfield',
    width: 30,
    name: 'npa',
    fieldLabel: 'NPA',
    allowBlank: false,
    minLength: 4
    },{
    xtype: 'textfield',
    name: 'localite',
    fieldLabel: 'Localité',
    allowBlank: false,
    minLength: 2
    },{
    xtype: 'textfield',
    width: 80,
    name: 'canton',
    fieldLabel: 'Canton',
    allowBlank: true
    },{
    xtype: 'textfield',
    name: 'pays',
    fieldLabel: 'Pays',
    allowBlank: false,
    value: 'Suisse',
    minLength: 6
    },{
    xtype: 'textfield',
    name: 'tel',
    fieldLabel: 'Téléphone',
    allowBlank: false,
    minLength: 6
    },
    {
    //the width of this field in the HBox layout is set directly
    //the other 2 items are given flex: 1, so will share the rest of the space
    width: 50,
    style: 'margin-top:15px',
    xtype: 'combo',
    mode: 'local',
    value: '1',
    maxHeight: 200,
    triggerAction: 'all',
    forceSelection: true,
    allowBlank: false,
    editable: false,
    fieldLabel: 'Fonction',
    name: 'fonction',
    displayField: 'Fonction',
    valueField: 'FonctionId',
    queryMode: 'local',
    store: myFonc
    },
    {
    xtype: 'multiselect',
    fieldLabel: 'Activités',
    height: 100,
    name: 'activite',
    anchor: '100%',
    minSelections: 1,
    minSelectionsText: 'Selectionner au moins {0} activité(s)',
    // autoScroll: true,
    // overflowY: 'scroll',
    // overflowX: 'scroll',
    id: 'activite',
    allowBlank: false,
    store: myAct,
    // value: ['3', '4', '6'],
    displayField: 'Activite',
    valueField: 'ActiviteId',
    // forceSelection: true,
    // editable: false,
    // queryMode: 'local',
    ddReorder: true
    }
    ],

    dockedItems: [{
    xtype: 'container',
    dock: 'bottom',
    layout: {
    type: 'hbox',
    align: 'middle'
    },
    padding: '10 10 5',

    items: [{
    xtype: 'component',
    id: 'formErrorState',
    baseCls: 'form-error-state',
    flex: 1,
    validText: 'Formulaire valide',
    invalidText: 'Veuillez vérifier le formulaire',
    tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'),

    getTip: function() {
    var tip = this.tip;
    if (!tip) {
    tip = this.tip = Ext.widget('tooltip', {
    target: this.el,
    title: 'Error Details:',
    autoHide: false,
    anchor: 'top',
    mouseOffset: [-11, -2],
    closable: true,
    constrainPosition: false,
    cls: 'errors-tip'
    });
    tip.show();
    }
    return tip;
    },

    setErrors: function(errors) {
    var me = this,
    baseCls = me.baseCls,
    tip = me.getTip();

    errors = Ext.Array.from(errors);

    // Update CSS class and tooltip content
    if (errors.length) {
    me.addCls(baseCls + '-invalid');
    me.removeCls(baseCls + '-valid');
    me.update(me.invalidText);
    tip.setDisabled(false);
    tip.update(me.tipTpl.apply(errors));
    } else {
    me.addCls(baseCls + '-valid');
    me.removeCls(baseCls + '-invalid');
    me.update(me.validText);
    tip.setDisabled(true);
    tip.hide();
    }
    }
    }, {
    xtype: 'button',
    formBind: true,
    disabled: true,
    text: 'Cr&eacute;er le compte',
    width: 140,
    handler: function() {
    var form = this.up('form').getForm();

    // Normally we would submit the form to the server here and handle the response...
    form.submit({
    clientValidation: true,
    async: false,
    //waitMsg: 'Veuillez patienter ...',
    url: 'php/create_user.php',
    success: function(form, action) {

    var fld_email = formPanel.getComponent('email');
    var fld_password = formPanel.getComponent('password1');

    var p_user = {
    Username : fld_email.getValue(),
    Password : fld_password.getValue()
    }

    g_user = p_user;
    Ext.util.Cookies.set("user", Ext.JSON.encode(g_user), new Date(new Date().getTime() + (cookies_time)));

    window.location.reload();
    return;
    },
    failure: function(form, action) {

    Ext.MessageBox.show({
    title : 'Warning',
    msg : 'Cet utilisateur existe d&eacute;j&agrave;.',
    buttons : Ext.MessageBox.OK,
    icon : Ext.MessageBox.WARNING,
    fn : null
    });

    Ext.get('email').focus();

    // console.log('call php KO');
    }
    });


    /* if (form.isValid()) {

    Ext.Msg.alert('Submitted Values', form.getValues(true));
    } */
    }
    }]
    }]
    });

    }

  2. My God !

    I was becoming crazy, trying to solve one issue after anoter .... While I was developping an Item selector which was not working properly, i just integrated my whole site on step by step when ....

    I did copy the MultiSelect and ItemSelector.js file from the exemples ../ux/ into the lib ... and bingo ... my multiselect is working and my itemselector as well ...

    The question is why does .js example files are not the same than into the lib ??

    Z

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Please use BBCode CODE tags when posting code.

    Can the multiselect scroll even if the browser doesn't show scrollbar?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    dmartin is on a distinguished road

      0  

    Default No

    No


    Unfortunately not. Strange Behaviours .... the field expand to the whole form when I click into, then goes back to it's original form.

    Working fine with 4.0

    I have another form with a simple htmleditor and 2 hidden fields which also have a strange behaviours ...

    I will keep the 4.0 for the scroll, but will have to translate the code for French, as I may not use locale translation of the 4.1 .... and then will try to fix the strange behaviours of my simple window ...

  5. #4
    Sencha User
    Join Date
    Dec 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    dmartin is on a distinguished road

      0  

    Default Solved

    Solved


    My God !

    I was becoming crazy, trying to solve one issue after anoter .... While I was developping an Item selector which was not working properly, i just integrated my whole site on step by step when ....

    I did copy the MultiSelect and ItemSelector.js file from the exemples ../ux/ into the lib ... and bingo ... my multiselect is working and my itemselector as well ...

    The question is why does .js example files are not the same than into the lib ??

    Z

Thread Participants: 1

Tags for this Thread