2 Attachment(s)
ItemSelector doesn't work in ExtJS 4.1.0-b3 (ext-4.1.0-beta-3)
REQUIRED INFORMATION
Ext version tested:- ExtJS 4.1.0b1
- ExtJS 4.1.0b2
- ExtJS 4.1.0b3
Browser versions tested against:- Chrome 11 (Windows)
- IE9.0.8112.16421
Description:- Ext.ux.form.ItemSelector- Doesn't work in newer version. However the MultiSelect works nice. I've tried with other betas but doesn't work either. Version 4.0.7 Works both NICE
Steps to reproduce the problem:The result that was expected:- Item selector must appears and be functional like the example online
The result that occurs instead:- the itemselector doesn't appears
Test Case:
Code:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" lang="Javascript" src="ext-all-debug-w-comments 4.1.0-b3.js"></script>
<script type="text/javascript" src="/ux/layout/MultiSelect.js"></script>
<script type="text/javascript" src="/ux/layout/ItemSelector.js"></script>
<script type="text/javascript" src="/ux/form/MultiSelect.js"></script>
<script type="text/javascript" src="/ux/form/ItemSelector.js"></script>
<link href="resources/css/ext-all-gray.css" rel="stylesheet" type="text/css">
<link href="resources/css/ux/ItemSelector.css" rel="stylesheet" type="text/css" >
<script>
/*Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);/*/
Ext.onReady(function(){
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = Ext.widget('form', {
title: 'MultiSelect Test',
width: 400,
bodyPadding: 10,
renderTo: 'multiselect',
items:[{
anchor: '100%',
xtype: 'multiselect',
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect',
allowBlank: false,
// minSelections: 2,
// maxSelections: 3,
store: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
value: ['3', '4', '6'],
ddReorder: true
}],
tbar:[{
text: 'Options',
menu: [{
text: 'Set value (2,3)',
handler: function(){
msForm.getForm().findField('multiselect').setValue(['2', '3']);
}
},{
text: 'Toggle enabled',
handler: function(){
var m = msForm.getForm().findField('multiselect');
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
},{
text: 'Toggle delimiter',
handler: function() {
var m = msForm.getForm().findField('multiselect');
if (m.delimiter) {
m.delimiter = null;
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
'see that values are now submitted as separate parameters.');
} else {
m.delimiter = ',';
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
'see that values are now submitted as a single parameter separated by the delimiter.');
}
}
}]
}],
buttons: [{
text: 'Clear',
handler: function(){
var field = msForm.getForm().findField('multiselect');
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reset',
handler: function() {
msForm.getForm().reset();
}
}, {
text: 'Save',
handler: function(){
if(msForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
msForm.getForm().getValues(true));
}
}
}]
});
var ds = Ext.create('Ext.data.ArrayStore', {
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = Ext.widget('form', {
title: 'ItemSelector Test',
width: 700,
bodyPadding: 10,
renderTo: 'itemselector',
tbar:[{
text: 'Options',
menu: [{
text: 'Set value (2,3)',
handler: function(){
isForm.getForm().findField('itemselector').setValue(['2', '3']);
}
},{
text: 'Toggle enabled',
handler: function(){
var m = isForm.getForm().findField('itemselector');
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
},{
text: 'Toggle delimiter',
handler: function() {
var m = isForm.getForm().findField('itemselector');
if (m.delimiter) {
m.delimiter = null;
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
'see that values are now submitted as separate parameters.');
} else {
m.delimiter = ',';
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
'see that values are now submitted as a single parameter separated by the delimiter.');
}
}
}]
}],
items:[{
xtype: 'itemselector',
name: 'itemselector',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
store: ds,
displayField: 'text',
valueField: 'value',
value: ['3', '4', '6'],
allowBlank: false,
// minSelections: 2,
// maxSelections: 3,
msgTarget: 'side'
}],
buttons: [{
text: 'Clear',
handler: function(){
var field = isForm.getForm().findField('itemselector');
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reset',
handler: function() {
isForm.getForm().reset();
}
}, {
text: 'Save',
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
isForm.getForm().getValues(true));
}
}
}]
});
});
</script>
</head>
<body>
<div id="multiselect"></div>
<div id="itemselector"></div>
</body>
</html>
HELPFUL INFORMATION
Screenshot or Video:ExtJS 4.0.7Debugging already done:Possible fix:Additional CSS used:- ext-all.css
- ext-all-access.css
- ext-all-gray.css
Operating System:
Issue with the Item Selector and Multiselect in 4.1.3
Hi,
I need to have the Item selector implemented in my project based on the values that are populated from the database in the "Available" part of item selector. However, I tried implementing the same using the example given in the Sencha Examples. The item selector does not render on the gsp page. I've tried checking the plugins and the necessary js files for the example to work and still I see the same result. I've copied the multiselect-demo.js as it as in my sample and tried and nothing additional has either been included or excluded. Kindly suggest....Thanks
