Has anyone used the multiselect and already went through this problem here?In the example of sencha component uses the bootstrap.js
Code:
<script type="text/javascript" src="../../bootstrap.js"></script>
then works fine, but bootstrap load ext-all-debug.js.
multisel_all_debug.jpg
in my aplication I use ext-all.js then I change the code for load manually like this:
Code:
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ux/layout/component/form/MultiSelect.js"></script>
<script type="text/javascript" src="ux/layout/component/form/ItemSelector.js"></script>
<script type="text/javascript" src="ux/form/MultiSelect.js"></script>
<script type="text/javascript" src="ux/form/ItemSelector.js"></script>
Whith this change I load ext-all but the component has problem:
multisel_alljs.jpg
if I change the code:
Code:
<script type="text/javascript" src="ext/ext-all.js"></script>
to
Code:
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
Works fine. But I need that it works with ext-all.js
See my sample code, I separated the component for better understand.
http://aplicacoes.sankhya.com.br/temp/multisel.zip
Thanks in Advanced,
ClaudioPrv
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Seleção de Clientes</title>
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/bootstrap.js"></script>
<!-- Shared -->
<link rel="stylesheet" type="text/css" href="ux/css/example.css" />
<!-- Example -->
<script type="text/javascript" src="multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="ux/css/ItemSelector.css" />
</head>
<body>
<h1>Seleção de Clientes</h1>
<div id="itemselector" class="demo-ct"></div>
</body>
</html>
multiselect.js
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(){
function createDockedItems(fieldId) {
return [{
xtype: 'toolbar',
dock: 'top',
items: {
text: 'Templates',
menu: [{
text: 'Template 1',
handler: function(){
Ext.getCmp(fieldId).setValue([13, 25]);
}
},{
text: 'Template 2',
handler: function(){
Ext.getCmp(fieldId).setValue([25, 18, 11]);
}
}]
}
}, {
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {
minWidth: 75
},
items: ['->', {
text: 'Limpar',
handler: function(){
var field = Ext.getCmp(fieldId);
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reiniciar',
handler: function() {
Ext.getCmp(fieldId).up('form').getForm().reset();
}
}, {
text: 'Salvar',
handler: function(){
var form = Ext.getCmp(fieldId).up('form').getForm();
if (form.isValid()){
Ext.Msg.alert('Clientes Enviados', 'Os seguintes cursos foram enviados pro servidor: <br />'+
form.getValues(true));
}
}
}]
}];
}
var ds = Ext.create('Ext.data.ArrayStore', {
data: [
[10,'Fernando Silva'],
[11, 'Marcos José'],
[12, 'Paulo Henrique'],
[24, 'Cláudio Prv'],
[25, 'José das Coves'],
[21, 'Armando Silva'],
[13, 'Paula Fonseca'],
[17, 'Marcos da Silva'],
[18, 'Lúcia Helena'],
[14, 'Jorge Armando']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = Ext.widget('form', {
title: 'Selecione os Clientes',
width: 700,
bodyPadding: 10,
renderTo: 'itemselector',
items:[{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'Seleção',
imagePath: '../ux/images/',
store: ds,
displayField: 'text',
valueField: 'value',
value: [10, 25, 17],
allowBlank: false,
msgTarget: 'side'
}],
dockedItems: createDockedItems('itemselector-field')
});
});
Multiselect without bootstrap
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Seleção de Clientes</title>
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<!-- <script type="text/javascript" src="ext/ext-all-debug.js"></script> works fine -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ux/layout/component/form/MultiSelect.js"></script>
<script type="text/javascript" src="ux/layout/component/form/ItemSelector.js"></script>
<script type="text/javascript" src="ux/form/MultiSelect.js"></script>
<script type="text/javascript" src="ux/form/ItemSelector.js"></script>
<!-- Shared -->
<link rel="stylesheet" type="text/css" href="ux/css/example.css" />
<!-- Example -->
<script type="text/javascript" src="multiselectman.js"></script>
<link rel="stylesheet" type="text/css" href="ux/css/ItemSelector.css" />
</head>
<body>
<h1>Seleção de Clientes</h1>
<div id="itemselector" class="demo-ct"></div>
</body>
</html>
in multiselectman.js I removed the loader
Ext.onReady(function(){
function createDockedItems(fieldId) {
return [{
xtype: 'toolbar',
dock: 'top',
items: {
text: 'Templates',
menu: [{
text: 'Template 1',
handler: function(){
Ext.getCmp(fieldId).setValue([13, 25]);
}
},{
text: 'Template 2',
handler: function(){
Ext.getCmp(fieldId).setValue([25, 18, 11]);
}
}]
}
}, {
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {
minWidth: 75
},
items: ['->', {
text: 'Limpar',
handler: function(){
var field = Ext.getCmp(fieldId);
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reiniciar',
handler: function() {
Ext.getCmp(fieldId).up('form').getForm().reset();
}
}, {
text: 'Salvar',
handler: function(){
var form = Ext.getCmp(fieldId).up('form').getForm();
if (form.isValid()){
Ext.Msg.alert('Clientes Enviados', 'Os seguintes cursos foram enviados pro servidor: <br />'+
form.getValues(true));
}
}
}]
}];
}
var ds = Ext.create('Ext.data.ArrayStore', {
data: [
[10,'Fernando Silva'],
[11, 'Marcos José'],
[12, 'Paulo Henrique'],
[24, 'Cláudio Prv'],
[25, 'José das Coves'],
[21, 'Armando Silva'],
[13, 'Paula Fonseca'],
[17, 'Marcos da Silva'],
[18, 'Lúcia Helena'],
[14, 'Jorge Armando']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = Ext.widget('form', {
title: 'Selecione os Clientes',
width: 700,
bodyPadding: 10,
renderTo: 'itemselector',
items:[{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'Seleção',
imagePath: '../ux/images/',
store: ds,
displayField: 'text',
valueField: 'value',
value: [10, 25, 17],
allowBlank: false,
msgTarget: 'side'
}],
dockedItems: createDockedItems('itemselector-field')
});
});
Answered: Ux Multiselect problem with ext-all.js
Reply With Quote
