logo
down
shadow

Error in collapsible panel in Sencha application


Error in collapsible panel in Sencha application

Content Index :

Error in collapsible panel in Sencha application
Tag : extjs , By : Magnus
Date : December 01 2020, 05:00 PM

will be helpful for those in need There is no config property for container. You will have to set the items array to the container and not to the config attribute.
Code as shown below.
Ext.define('myapp.view.applications.DetailSummarySection', {
    extend: 'Ext.Container',
    xtype: 'applications_detailsummarysection',
    emptyText: 'No data found',
    appId: null,
    items: [{
        itemId: 'details_summary',
        tpl: Ext.create('Ext.XTemplate',
            '<tpl for="details">',
            //....................
            '</tpl>'
        )
    }, {
        xtype: 'formpanel',
        collapsible: true,
        collapsed: true,
        layout: 'hbox',
        bodyPadding: 10,
        title: 'Dates',
        items: [{
            xtype: 'textfield',
            name: 'name',
            label: 'Name'
        }]
    }, {
        xtype: 'toolbar',
        itemId: 'popup_bar',
        docked: 'bottom',
        border: '0px',
        height: '54px',
        style: {
            'background-color': '#1E94C0'
        },

        defaults: {
            flex: 1,
            height: '48px',
            padding: '0 0 0 0',
            style: {
                'line-height': '10px',
                'margin': '3px 0 0 0 ',
                'border-radius': '0px',
                'color': '#ffffff',
                'background-color': 'transparent',
                'border': '0px'
            }
        },
        items: [{
            text: 'Comments',
            itemId: 'notes',
            cls: 'pop-btn',
            iconCls: 'action',
            iconAlign: 'top'
        }, {
            text: 'Feedback',
            itemId: 'feedBackBtn',
            cls: 'pop-btn',
            iconCls: 'star',
            iconAlign: 'top'
        }, {
            text: 'CVS',
            itemId: 'cv',
            cls: 'pop-btn',
            iconCls: 'compose',
            iconAlign: 'top'
        }, {
            text: 'Reject',
            cls: 'pop-btn',
            itemId: 'rejectBtn',
            iconAlign: 'top',
            iconCls: 'trash'
        }, {
            text: 'Reject',
            cls: 'pop-btn',
            itemId: 'rejectCvSpecBtn',
            hidden: true,
            iconAlign: 'top',
            iconCls: 'trash'

        }]
    }]
});

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Spry Collapsible Panel within Collapsible Panel, inconsistent errors


Tag : javascript , By : jan
Date : March 29 2020, 07:55 AM
it helps some times Problem solved for anyone who is also stuck.
Open up the SpryCollapsiblePanel.js . Find the line that says

Sencha Cmd (windows) build error 'not a recognized Sencha SDK or application folder'


Tag : development , By : Vorinowsky
Date : March 29 2020, 07:55 AM
it helps some times I uninstalled and re-installed. That fixed the issue. Sean Fahey's answer may be worth looking into if you have this same problem.

Bootstrap 3 - Collapsible right-side panel like Google Drive Details/Activity panel


Tag : jquery , By : Edwin
Date : March 29 2020, 07:55 AM
This might help you I had needed a similar approach to one of our projects and fullscreen view is here.
I modified the script and layout a bit to get what you trying to achieve. here is the code and fullscreen is here. I used jquery cookie to retain the view state even after page refresh. Clicking on the Cog Icon will toggle the sidebar. The script is:
    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $menu.css('right', -($menu.outerWidth() + 10));
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ right: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }


        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    right: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ right: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
            if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                    right: 0
                }, function () {
                    $menu.show(1000);
                });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
            }
        });
        $('.bs-tooltip').tooltip();
    });

Bootstrap panel collapse incorrect icons with collabsible panel in another collapsible panel


Tag : html , By : koder
Date : March 29 2020, 07:55 AM
With these it helps I've replaced the .collapse with .panel-collapse to fix the icon states and changed the way you replace your text (read more / read less) by overriding the text() function return inside the click() function of your button.
Here is what you should insert to your JS
//Change icon states
$('.panel-collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

//Read more or less
$(document).ready(function () {
    $(".btn2").click(function () {
        $(this).text(function (i, text) {
            return text === "Read more" ? "Read less" : "Read more";
        })
    });
});

How to change color of Panel on expand of Ajax collapsible panel which is created at code - behind


Tag : javascript , By : Jesenko Mehmedbasic
Date : March 29 2020, 07:55 AM
help you fix your problem We can achieve this using javascript.
In your above code (Server side code) add following line at the end of the code.
pnl1.Attributes.Add("onclick", "JavaScript:ChangeColor('MainContent_pnl1');");
function ChangeColor(MainContent_pnl1) { 
            document.getElementById(MainContent_pnl1).style.color = "blue"; 
        } 
shadow
Privacy Policy - Terms - Contact Us © scrbit.com