1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    doxe is on a distinguished road

      0  

    Default [SOLVED] Combobox in a toolbar : render issues

    [SOLVED] Combobox in a toolbar : render issues


    Hello everybody,

    First of all i apologize for my quite bad english, i'm a french guy

    i encountered some issues with a combobox which is appended to a toolbar in a complex border layout.
    There is some rendering issues both in FF & IE7 but they are more "important" in FF.

    Here is some screenshots to illustrate my problem.

    FF : as you see, trigger is not displayed, checkboxes "jumps" over my combo



    IE : minor issues



    Here is my code :

    Code:
                var config = {
                    companyFormPanel: companyFormPanel,
                    routingFormPanel: routingFormPanel,
                    trafficGoodsPanel: trafficGoodsPanel,
                    items: [{
                        region: 'center',
                        layout: 'fit',
                        layoutConfig: {
                            deferredRender: true
                        },
                        bodyBorder: false,
                        border: false,
                        tbar: [companyTbMenu, {
                            xtype: 'tbseparator'
                        }, {
                            text: getTranslatedText('save'),
                            iconCls: 'save-icon',
                            id: 'btn-save-' + this.id,
                            handler: function(){
                                EQ.Quotation.fct.saveQuotation(false);
                            },
                            scope: this
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            text: getTranslatedText('save_and_close'),
                            iconCls: 'save-close-icon',
                            id: 'btn-save-close-' + this.id,
                            handler: function(){
                                EQ.Quotation.fct.saveQuotation(true);
                            },
                            scope: this
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            text: getTranslatedText('preview'),
                            iconCls: 'preview-quotation-icon'
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            text: getTranslatedText('send_quotation'),
                            iconCls: 'send-quotation-icon'
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            text: getTranslatedText('close'),
                            iconCls: 'close-icon',
                            handler: function(){
                                EQ.Quotation.fct.closeQuotation(this);
                            },
                            scope: this
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            text: getTranslatedText('print'),
                            iconCls: 'print-icon',
                            id: 'btn-print-' + this.id,
                            disabled: true
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            text: getTranslatedText('delete_element'),
                            id: 'btn-delete-' + this.id,
                            iconCls: 'delete-quotation-icon',
                            disabled: true,
                            handler: function(){
                                Ext.Msg.confirm(getTranslatedText('confirm'), getTranslatedText('deletion_confirmation_quotation'), EQ.Quotation.fct.deleteQuotation);
                            },
                            scope: this
                        }, '->', {
                            text: getTranslatedText('routing_details'),
                            id: 'btn-routing-details-' + this.id,
                            iconCls: 'validate-routing-icon',
                            disabled: true,
                            handler: function(){
                                var win = Ext.getCmp('win-routing-details-' + this.id);
                                if (typeof(win) !== 'undefined') {
                                    win.show();
                                }
                            },
                            scope: this
                        }, {
                            text: getTranslatedText('edit_routing'),
                            id: 'btn-routing-edit-' + this.id,
                            iconCls: 'edit-routing-icon',
                            disabled: true,
                            handler: function(){
                                Ext.Msg.confirm('Confirmation', 'Attention, en modifiant le routing, tous les équipements déjà spécifiés ainsi que toutes les charges déjà ajoutées/modifiées seront supprimés sans possibilité de revenir en arrière.<br/><br/><strong style="font-weight:bold!important">Êtes-vous sûr de vouloir exécuter cette action ?</strong>', function(btn){
                                    if (btn == 'yes') {
                                        routingFormPanel.enable();
                                        var equipmentsPanel = Ext.getCmp('equipments-panel-' + quotationId);
                                        equipmentsPanel.items.each(function(item){
                                            equipmentsPanel.remove(item);
                                        });
                                    }
                                });
                            },
                            scope: this
                        }],
                        items: [{
                            autoHeight: true,
                            bodyBorder: false,
                            border: false,
                            scope: this,
                            items: {
                                layout: 'column',
                                title: getTranslatedText('general_informations'),
                                collapsible: true,
                                animCollapse: false,
                                bodyBorder: false,
                                border: false,
                                items: [{
                                    region: 'west',
                                    columnWidth: .40,
                                    layout: 'form',
                                    bodyBorder: false,
                                    items: [companyFormPanel]
                                }, {
                                    region: 'center',
                                    columnWidth: .60,
                                    bodyBorder: false,
                                    border: false,
                                    layout: 'form',
                                    items: [routingFormPanel]
                                }]
                            }
                        }, {
                            autoHeight: true,
                            title: getTranslatedText('goods'),
                            bodyBorder: false,
                            border: false,
                            cls: 'quotation-main-element-panel',
                            collapsible: true,
                            animCollapse: false,
                            items: [trafficGoodsPanel]
                        }, {
                            id: 'equipments-panel-' + this.id,
                            title: getTranslatedText('equipments'),
                            cls: 'quotation-main-element-panel',
                            collapsed: true,
                            collapsible: true,
                            animCollapse: false,
                            autoHeight: true,
                            autoScroll: true,
                            bodyBorder: false,
                            border: false,
                            tbar: equipmentsToolbar
                        }, {
                            id: 'warnings-clauses-panel-' + this.id,
                            title: 'Avertissements & clauses',
                            cls: 'quotation-main-element-panel',
                            autoHeight: true,
                            bodyBorder: false,
                            collapsible: true,
                            animCollapse: false,
                            border: false,
                            items: [EQ.Quotation.WarningsClausesGrid(this.id)]
                        }]
                    }]
                };
    My item is : "equipmentsToolbar", here is the code :

    Code:
     EQ.Quotation.EquipmentsToolbar = function(panelId){
            var tbEquipments; // Toolbar
            var dsEquipments; // Datastore
            var cbEquipments; // Combobox
            dsEquipments = new Ext.data.JsonStore({
                url: '/administration/equipments/get-all-json',
                id: 'Equipment_Type_id',
                root: 'equipments',
                autoLoad: true,
                totalProperty: 'total',
                fields: [{
                    name: 'checked',
                    type: 'bool'
                }, {
                    name: 'Equipment_Type_id',
                    type: 'string'
                }, {
                    name: 'Description',
                    type: 'string'
                }, {
                    name: 'Abbreviation',
                    type: 'string'
                }, {
                    name: 'ISO_Code',
                    type: 'string'
                }, {
    				name: 'Transport_Type',
                    type: 'string'
    			}, {
    				name: 'Reefer',
                    type: 'int'
    			}, {
    				name: 'Out_Of_Gauge',
                    type: 'int'
    			}, {
    				name: 'Mandatory_Shipper_Owned',
                    type: 'int'
    			}]
            });
            
    		var isReefer, isOd, isMandatoryShipperOwned;		
            cbEquipments = new Ext.form.ComboBox({
    			id: 'equipments-type-' + panelId,
    			emptyText: getTranslatedText('select_equipment'),
    			editable: false,
                typeAheadDelay: 100,
                allowBlank: false,
                store: dsEquipments,
                displayField: 'Description',
                valueField: 'Equipment_Type_id',
                hiddenName: 'Equipment_Type_id',
    			forceSelection: true,
                name: 'Equipment',
                hideLabel: true,
                enableKeyEvents: true,
                triggerAction: 'all',
                listeners: {
                    select: function(){					
    					chbxOperatingReefer.setValue(false);
    					chbxOverDimension.setValue(false);	
    					chbxShipperOwned.setValue(false);				
    					chbxOperatingReefer.disable();
    					chbxOverDimension.disable();
    					chbxShipperOwned.enable();			
    					isReefer  = false;
    					isOd  = false;
    					isMandatoryShipperOwned = false;
    					// Retrieve selected equipment properties
    					var equipment = cbEquipments.getStore().getById(cbEquipments.getValue());
    					if (equipment.data.Reefer) {
    						isReefer = true;
    						chbxOperatingReefer.enable();
    					}
    					if (equipment.data.Out_Of_Gauge) {
    						isOd = true;
    						chbxOverDimension.enable();
    					}
    					if (equipment.data.Mandatory_Shipper_Owned) {
    						isMandatoryShipperOwned = true;
    						isShipperOwned = true;	
    						chbxShipperOwned.setValue(true);	
    						chbxShipperOwned.disable();												
    					}
                    }
                }
            });
            
            chbxOverDimension = new Ext.form.Checkbox({
    			id: 'equipments-over-dimension-' + panelId,
                boxLabel: getTranslatedText('is_over_dimensioned'),
                disabled: true
            });
            
            chbxOperatingReefer = new Ext.form.Checkbox({
    			id: 'equipments-reefer-' + panelId,
                boxLabel: getTranslatedText('is_reefered'),
                disabled: true
            });
            
            chbxShipperOwned = new Ext.form.Checkbox({
    			id: 'equipments-shipper-owned-' + panelId,
                boxLabel: getTranslatedText('is_shipper_owned')
            });
            
            txtPotential = new Ext.form.NumberField({
    			id: 'equipments-potential-' + panelId,
                name: 'Potential',
    			emptyText: getTranslatedText('potential'),
                allowBlank: false,
                labelSeparator: '',
                labelStyle: 'font-size:10px;font-weight:bold;',
    			value: '1500'
            });		        
    				
            tbEquipments = new Ext.Toolbar({
    			disabled: true,
                items: [cbEquipments, ' ', '-', ' ', chbxOverDimension, ' ', '-', ' ', chbxOperatingReefer, '-', ' ', chbxShipperOwned, ' ', '-', ' ', txtPotential, ' ', {
                    text: getTranslatedText('add_this_equipment'),
                    iconCls: 'add-equipment-icon',
                    handler: function(){
    					EQ.Quotation.fct.checkEquipmentCreation(cbEquipments, chbxOverDimension, chbxOperatingReefer, chbxShipperOwned, txtPotential, isMandatoryShipperOwned);
                    }
                }]
            })
            
            return tbEquipments;
        }
    I hope i am clear thanks in advance

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It looks like it is being rendered into a hidden element.

    One of its parent DOM elements is display: none

    Ensure that all tabs are hideMode: 'offsets'

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    doxe is on a distinguished road

      0  

    Default


    Hi Animal & thanks for your answer.

    I found the problem, my panel has the property :

    Code:
    collapsed: true
    Now it works without it, thanks you for your tips which show me the right way

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, there has been a lot of talk about this.

    Rendering into a Panel which starts collapsed won't work because collapsing uses display: none style

    You can begin with the Panel expanded, and call collapse in an afterlayout handler (with the {single: true} option so that only the first layout collapses it)

Thread Participants: 1