Friday, 27 November 2015

Extjs Hide Expand/Collapse button in Grouping header in Grouping grid

While  working with Extjs grouping grid. I would like to hide and show the Expand/Collapse button in Grouping grid group header. but i don't want to global for all grouping grid.
 So i added custom CSS for my particular grid.


.myEmployeeGrid .x-grid-group-hd-collapsible .x-grid-group-title {
background : none !important;
background-image: none !important;

}




Before applying this CSS for your grid just inspect the CSS class which class is rendered.
Add this the following property to your grid.

hdCollapsedCls: 'myEmployeeGrid',







Friday, 20 November 2015

ExtJs: Field width Error Message

Recently i found the top support tip from Kevin Cassidy.

while Using the application have you ever wanted the validation messages under our Form field( ex: Config Option as msgTorget:'under'). But  the message will appear to the only out input field not to the completed entire width of the field.



new Ext.form.field.Number({
    fieldLabel: 'Budget',
    allowBlank: false,
    width: 170,
    margin: 50,
    msgTarget: 'under',
    renderTo: Ext.getBody()
});
 
 Basically it will render like this


We need to add the CSS class config option. to number filed.


cls: 'full-width-error'
 






Override CSS  class will be


       <style>
            .full-width-error .x-form-error-wrap-under-side-label::before {
                display: none !important;
            }

            .full-width-error .x-form-error-wrap-under .x-form-error-msg {
                display: block !important;
                width: 170px !important;
            }
        </style>