How to remove checkall option in extjs checkboxmodel?

问题

How to remove check all option is extjs 4 checkboxmodel?

Regards

回答1:

When defining a grid (in 4.2.1), set this config option to:

selModel: Ext.create('Ext.selection.CheckboxModel', { showHeaderCheckbox: false }),

(The relevant part is showHeaderCheckbox :false)

回答2:

I have managed to hide it using pure CSS:

Code:

.x-column-header-checkbox {display:none;}

回答3:

When you're creating your checkboxmodel, try specifying injectCheckbox: false into its configuration. From the API:

Instructs the SelectionModel whether or not to inject the checkbox header automatically or not. (Note: By not placing the checkbox in manually, the grid view will need to be rendered 2x on initial render.) Supported values are a Number index, false and the strings 'first' and 'last'.

回答4:

Inside grid panel afterrender event using jquery

listeners: {

        afterrender: function (grid) {
           $('.x-column-header-checkbox').css('display','none');
        }
    }

回答5:

According to API, the type of "header" property is String. Said that, the correct value is ''. It has worked for me on ExtJS 3.4

this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
            singleSelect : true, // or false, how you like
            header : ''
        });

回答6:

heder:false in config or injectCheckBoxHeader = false hide the entire column. CSS solution is class based so any other widget using the same selection model would also hide the entire check.

回答7:

In ExtJS 4 a header config can be provided as below to display a blank or custom text in the header.

getHeaderConfig: function() {
                var me = this;
                showCheck = false;
                return {
                    isCheckerHd: showCheck,
                    text : '&#160;',
                    width: me.headerWidth,
                    sortable: false,
                    draggable: false,
                    resizable: false,
                    hideable: false,
                    menuDisabled: true,
                    dataIndex: '',
                    cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
                    renderer: Ext.Function.bind(me.renderer, me),

                    //me.renderEmpty : renders a blank header over a check box column
                    editRenderer: me.editRenderer || me.renderEmpty,
                    locked: me.hasLockedHeader()
                };

            },

回答8:

I encountered this issue in ExtJS 4.0.7 version. First I removed checkbox layout:

.rn-grid-without-selectall .x-column-header-checkbox .x-column-header-text
{
    display: none !important;
}

Then I used the following code in afterrender listener of the grid:

afterrender: function (grid) {
    this.columns[0].isCheckerHd = false;
}

It is not a good solution but it can be used as a starting point.

回答9:

Thanks for all the good hints here. For Sencha 3.4, this is the extremely simple pure CSS I ended up using,

My_Panel_With_a_Grid_Without_Header_CheckBox = Ext.extend(Ext.Panel, {.... cls: 'innerpanel hiddeGridCheckBoxOnSingleSelect', ....}

in my CCS file:

.hiddeGridCheckBoxOnSingleSelect .x-grid3-hd-checker { visibility:hidden }

回答10:

Define {Header: false} in checkboxselectionModel

this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
            singleSelect : false,
            header : false
        });

来源：https://stackoverflow.com/questions/7321645/how-to-remove-checkall-option-in-extjs-checkboxmodel

标签

javascript

extjs

extjs4