PDA

View Full Version : Ux Multiselect problem with ext-all.js



claudioprv
11 Jan 2013, 4:33 AM
Hi guys,


Has anyone used the multiselect and already went through this problem here?In the example of sencha component uses the bootstrap.js


<script type="text/javascript" src="../../bootstrap.js"></script>

then works fine, but bootstrap load ext-all-debug.js.

41225

in my aplication I use ext-all.js then I change the code for load manually like this:




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

41226
if I change the code:


<script type="text/javascript" src="ext/ext-all.js"></script>
to

<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.
[/URL][URL]http://aplicacoes.sankhya.com.br/temp/multisel.zip (http://aplicacoes.sankhya.com.br/temp/multisel.zip)

Thanks in Advanced,

ClaudioPrv



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



<!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')
});


});

mitchellsimoens
13 Jan 2013, 9:09 AM
What are these?


<script type="text/javascript" src="ux/layout/component/form/MultiSelect.js"></script>
<script type="text/javascript" src="ux/layout/component/form/ItemSelector.js"></script>

claudioprv
13 Jan 2013, 2:59 PM
hi Mitchell

I solved some problems this component making the update to the last gpl version 4.1.1a, in the other post I continued because this post don't had been aproved yet.


<script type="text/javascript" src="ux/layout/component/form/ItemSelector.js"></script>
But I'm still not sure if this component will work correctly, in other post I post more informations, pictures and video.

http://www.sencha.com/forum/showthread.php?253657-Multiselec-Ux-problem-with-big-items

This post can be deleted...

Thanks,
Cláudio