Results 1 to 3 of 3

Thread: Collapse don't behave normally

  1. #1

    Default Collapse don't behave normally

    Hi,

    I have two issue related to the same thing : collapse: 'true'. If I collapse something, it will not render no matter what I've read some post on this and I've tried so many things that I'm finally posting this request.
    My issues are located in two really precise situation :
    - In my collapsible Panel, (it's in a Panel), I set an accordionLayout. When I open the app, everything is fine and as soon as the panel is not collapsed, everything is fine. If I collapse the panel, one or all of the subPanels (contained in the accordion) that was not previously viewed, will have a size that seems to be 0 by 0 (I'll explain what makes me say this later on). By collapsing I mean that : when you collapse a panel and it goes to the side, if you put your mouse on it, it will show. Openning a "none previously viewed panel" at this point will not work.
    - In a fieldset in a panel contained inside my accordionlayout, I have some comboboxs. If I pragmatically (by using collapse:true or searchLocationOptions.collapse(true) collapse the fieldset, I will never be able to see the combobox if i expend the fieldset.

    I have tried the forcelayout thing everywhere. I have a work around for my panels in the accordionlayout that looks like this :
    Code:
    accordionMenuPanel.layout.setActiveItem('historyPanel');
    accordionMenuPanel.layout.setActiveItem('searchPanel');
    ...
    Basically, I'm pragmatically opening each of my panels... this will set there size! But, if I resize my window and then collapse the panel with the accordion layout, there size are fixed to first rendering size... sniff

    Here is the accordion panel
    Code:
    var AccordionMenuPanel = new Ext.Panel({
        region: 'west',
        title: 'Tools',
        margins: '5 0 5 5',
        split: true,
        collapsible: true,
        width: 310,
        layout: 'accordion',
        // Layout animation was introducing a bug in collapsible panel 
        /*layoutConfig: {
         animate:true
         },*/
        items: [summaryPanel, historyPanel, searchPanel, printPanel, tagsPanel, helpPanel]
    });
    Note : I needed to disable the animation because if you pragmatically open multiple panels in a row... it keeps some of them opened forever lol!

    Here is my 3 issues thread... Plz help with collapsing! I can't animate my app, sniff

  2. #2

    Default Size 0 by 0 explanation

    First, when I pragmatically want to display panels one by one, it set a fixed size. So, when it does not display, it look like a no size panel.
    Second, when I don't force them to be displayed one by one, the accordion will open a little and show me the border of the panel contained inside So this mean, the panel is there and don't know what to do with inside things.
    Third, The fieldset do the same, it open a bit, but nothing is inside... (there is no border visible to confirm this by the way).

    Thanks

  3. #3

    Default More code for you

    Because I'm always asked to put my code, here is some...

    Note that I have more then 1 combobox in there. but I wanted to make this as short as possible.
    Fieldset : if I collapse it, I wont be able to see what's inside.
    Code:
    var searchLocationOptions = new Ext.form.FieldSet({
        id: 'searchLocationOptions',
        defaultType: 'combobox',
        labelWidth: 130,
        checkboxToggle: true,
        animCollapse: true,
        title: 'Search in Fields',
        items: [ 
            new Ext.form.ComboBox({
                id: 'documentTitleField',
                store: new Ext.data.SimpleStore({
                    fields: ['dataint'],
                    data: ['0'],
                    expandData: true
                }),
                displayField: 'dataint',
                mode: 'local',
                triggerAction: 'all',
                emptyText: 'Search...',
                selectOnFocus: true,
                fieldLabel: 'Documents Title',
                anchor: '100%'
            })
        ]
    });
    An example of panel inside the accordion.
    Code:
    var helpPanel = new Ext.Panel({
        id: 'helpPanel',
        title: 'Help',
        layout: 'fit',
        autoScroll: true,
        autoLoad: {
            url: '../../views/home/help.html',
            scope: this
        }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •