Blank Number field using Extjs

Question

enter image description hereI have 4 columns, namely Quantity, wastage, cost, Final Cost in a grid. at the last row of my grid, I have to show consolidated Final Cost, and nothing else. My problem is,in last row Quantity, wastage, and Cost column, 0 is shown, whereas in store data for these column aren't there for last row.

I just want to show empty value on these columns.

data: [{"Name":"Part-0000112-01","Wastage":"4.63","Unit_Cost":"7.00","Quantity":"7.2200","Type":"Fabric","Net_Consumption":"11.8500","totalCost":"82.95"},{"Name":"Part-0000114-01","Wastage":"0.0","Unit_Cost":"1.00","Quantity":"10.0000","Type":"Fabric","Net_Consumption":"10.0000","totalCost":"10.00"},{"Name":"Part-0000116-01","Wastage":"2.0","Unit_Cost":"1.00","Quantity":"10.0000","Type":"Trim","Net_Consumption":"12.0000","totalCost":"12.00",},{"Name":"Part-0000118-01","Wastage":"0.0","Unit_Cost":"0.00","Quantity":"10.0000","Type":"Trim","Net_Consumption":"10.0000","totalCost":"0.00"},{"totalCost":"104.95","Name":"Total Material Costs (InDollar)"}]

Code:

Ext.create('Ext.grid.Panel', {    
    store: BOMStore,    
    columns: [{    
        text: 'Name',    
        dataIndex: 'name'    
    }, {    
        text: 'Quantity',    
        dataIndex: 'Quantity',    
        editor: {    
            xtype : 'numberfield',       
            allowBlank : false,      
            listeners : {    
                change : function(field, newValue,o ,e) {    
                    var quantity = field.value;   
                    var selectedModel = this.up('grid').getSelectionModel().getSelection()[0];  
                    var wastage = selectedModel.get('Wastage');  
                    var unitCost = selectedModel.get('Unit_Cost');  
                    var updateTotalCost = getTotalCost(quantity,wastage,unitCost);  
                    selectedModel.set('totalCost', updateTotalCost);  
                    updateRowCosting(selectedModel);  
                }  
            }  
        }  
    }, {  
        text: 'Wastage',   
        dataIndex: 'Wastage',  
        editor: {  
            xtype : 'numberfield',   
            allowBlank : false,  
        }  
    },{  
        text: 'Cost',  
        dataIndex: 'Unit_Cost',  
        editor: {  
            xtype : 'numberfield',   
            allowBlank : false,  
        }  
    },{  
        text: 'Total Cost',  
        dataIndex: 'totalCost',  
        editor: {  
            xtype : 'numberfield',   
            allowBlank : false,  
        }  
    }]  
});

beso9595 beso9595 · Accepted Answer · 2018-09-24T10:30:06

You can use renderer which can be used as a converter, so you can check if the row is last one and return empty string.

FIDDLE

Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'numm',
        renderer: function (value, metaData, record, rowIndex, collIndex, store) {
            if (store.indexOf(record) === (store.totalCount - 1)) {
                return '';
            }
            return value;
        }
    }]
});

Blank Number field using Extjs

2 Answers