4.1.1 Multiselect Scroll Issue

[dmartin]

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));
} */
}
}]
}]
});

}

[mitchellsimoens]

Please use BBCode CODE tags when posting code.

Can the multiselect scroll even if the browser doesn't show scrollbar?

[dmartin]

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 ...

[dmartin]

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