1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Brazil
    Posts
    14
    Vote Rating
    0
    claudioprv is on a distinguished road

      0  

    Default Answered: Ux Multiselect problem with ext-all.js

    Answered: Ux Multiselect problem with ext-all.js


    Hi guys,

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

  2. What are these?

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    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


    What are these?

    Code:
    <script type="text/javascript" src="ux/layout/component/form/MultiSelect.js"></script>
    <script type="text/javascript" src="ux/layout/component/form/ItemSelector.js"></script>
    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
    Apr 2010
    Location
    Brazil
    Posts
    14
    Vote Rating
    0
    claudioprv is on a distinguished road

      0  

    Default


    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/showthre...with-big-items

    This post can be deleted...

    Thanks,
    Cláudio