ExtJS Grid Row Specific EmptyText?

问题:

Our application uses the Ext.grid.Panel to display rows of data. When the user clicks a "New..." button we are adding a new record to the grid store. Everything is working fine.

However, on certain fields, of just this new (as of yet) unsynced records, we would like to display specific empty text within certain cells. For example: 'Enter title here' or 'Choose a platform".

I know there is an emptyCellText property on Column, but a) its broken, and b) I'd like to have this happen only on new, unsynced (e.g. phantom) records.

As I am new to this framework, any ideas are most welcome.

回答1:

You can add this text in column renderer. You can test if record column value is not set and record is phantom. In this case you can add to column your placeholder text:

columns: [
    {
        header: 'Name',  
        dataIndex: 'name', 
        editor: {
            xtype: 'textfield',
            emptyText: 'Enter name'                
        },
        renderer: function(value, metaData, record) {
            if (!value && record.phantom) {
                return 'Enter name';
            } else {
                return value;
            }
        }
    }
]

Edit

For displaying empty text also in editor fields just use emptyText config property in editor configuration. In editor configuration you can define by xtype which type of field will be used (textfield, numberfield, etc.) and add any of field config propertis:

editor: {
    xtype: 'textfield',
    emptyText: 'Enter name',
    // other filed config properties...        
},

Fiddle with live example: https://fiddle.sencha.com/#fiddle/3b5