CODEWITHSUNDEEP
javascriptextjstags
David
David

Reputation: 4281

How to change cursor of a tagfield in ExtJS

I am using a tagfield in my application. Current cursor is comine like | (a straight bar or or vertical line). I want to change this as a hand. Can any body please suggest what I need to do.

{
    xtype: 'tagfield',
    growMax  : 10,
    valueField: 'title',
    displayField: 'title',
    queryMode: 'local',
    multiSelect: true,
    isFilterDataLoaded: false,
    disabled: true,
};

Upvotes: 1

Views: 522

Answers (2)

Nikos Js
Nikos Js

Reputation: 199

Or you can do it via css:

.x-form-text-default .x-tagfield-input-field {
cursor: pointer;
}

I suggest adding a cls and wrapping if it is only in one case.

Upvotes: 0

LellisMoon
LellisMoon

Reputation: 5020

You need to change 3 different html styles.

That's because the tagfield is builded whit different divs.

You can do it like this:

{
            xtype: 'tagfield',
            growMax: 10,
            valueField: 'title',
            displayField: 'title',
            queryMode: 'local',
            multiSelect: true,
            isFilterDataLoaded: false,
            listeners:{
              afterrender:function(component){
                  component.getEl().dom.style.cursor="pointer";
                  component.inputEl.dom.style.cursor="pointer";
                  component.inputWrap.dom.firstChild.style.cursor="pointer";
              }  
            },
            renderTo: Ext.getBody()
        }

Here is a working fiddle to show you

Upvotes: 1

Related Questions