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,498
    Vote Rating
    46
    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,498
    Vote Rating
    46
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."