Accordion project module - User Interface and Code Extjs¶

An accordion module is a layout which manages multiple panels in an expandable accordion style - Only one panel can be expanded at any given time.
In sitools project, we can add multiple resources into different panels in the accordion layout. And attention, only Ext.Panels and all subclasses of Ext.panel.Panel may be used in an accordion layout Container.

The USER INTERFACE:¶

The code Extjs:¶

The module:¶

Like the example in the last wiki - General project module by Integrating Ext JS with an existing resource;
Initiate the module and add the settings for the preference;

Example:

    init : function () {   
        // Save the preference in admin role 
        var project = Ext.getStore('ProjectStore').getProject();
        Ext.Ajax.request({
            method : "GET",
            url : project.get('sitoolsAttachementForUsers'), 
            success : function (response) {
                var json = Ext.decode(response.responseText);                
                this.view = Ext.create('sitools.user.view.modules.ChartExt.AccordionView');              

                this.show(this.view);
            }, 
            failure : alertFailure, 
            scope : this
        });

    },

The view:¶

Example:

Ext.create('Ext.panel.Panel', {
    title: 'guanji_IAS.mission',
    width: 300,
    height: 300,
    layout:'accordion',
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layoutConfig: {
        // layout-specific configs go here
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Introduction',
        html: 'Panel content!'
    },{
        title: 'SOHO',
        html: 'Panel content!'
    },{
        title: 'STEREO',
        html: 'Panel content!'
    }],
    renderTo: Ext.getBody()
})

3. The source JS codes:¶

1. You can find all MVC related Extjs, Js, HTML, CSS, JSON, Model in the git lab IAS: https://git.ias.u-psud.fr/gwang/idoc-medoc-solar-portal/tree/master/workspace/client-user-3.0/app.
2. You can download directly the files in this wiki and put them into the target folders:

Part of the architecture	File	Folder in the project	Comments
Model	AccordionChart.js	workspace/client-user-3.0/app/modules/
View	AccordionView.js	workspace/client-user-3.0/app/view/modules/ChartExt