PDA

View Full Version : Problem with editor event listener



titombo
29 Sep 2011, 2:52 AM
I have an aplication with the view:



//CUSTOMER ORDER LINE VIEW Ext.define('CustomerOrderLineGrid.view.customerorderline.List',
{
extend: 'Ext.grid.Panel'
, requires: ['Pm.ext.TextfieldExt']
, id: 'CustomerOrderLinesGrid'
, alias: 'widget.customerorderlinelist'
, store: 'CustomerOrderLines'
, title: 'Customer Order Lines' //, width: 523
, height: 600
, loadMask: true
, selType: 'cellmodel'
, plugins:
[
Ext.create('Ext.grid.plugin.CellEditing',
{
clicksToEdit: 1
})
]
, initComponent: function ()
{
this.columns = [
{
header: 'Id'
, dataIndex: 'Id'
, hideable: false
, hidden: true
},
{
header: '#'
, dataIndex: 'LineNumber'
, hideable: false
, width: 80 // fixed default width (pcs)
},
{
header: 'Part Number'
, dataIndex: 'PartNum'
, hideable: false
, flex: 1
, editor: {
xtype: 'combo'
, store: 'COLInventoryParts'
, displayField: 'PartNum'
, typeAhead: true
, width: 320
, allowBlank: true
, hideTrigger: true
, minChars: 1
, listeners:
{
select: function (f, r, i) {
// Inventory part object selected
var inventoryPartObj = f.lastSelection[0].data;
if (inventoryPartObj)
{
// Get grid object
var grid = Ext.ComponentMgr.get('CustomerOrderLinesGrid');
// Get the CustomerOrderLines store
var customerOrderLinesStore = grid.store.data.items;
// Get selected row position
var selectedRowId = grid.getSelectionModel().position.row; // Get the inventory part details
var partNum = this.getValue();
var description = inventoryPartObj.Description;
var orderedQty = 0;
var UoM = inventoryPartObj.UoM;
var salesPrice = inventoryPartObj.SalesPrice;
var amount = 0;
var lineStatus = 'Draft';
var reservedQty = 0;
var deliveredQty = 0;
var remainingQty = 0;
var UoMId = inventoryPartObj.UoMId;
// Update items in grid
customerOrderLinesStore[selectedRowId].data.PartNum = partNum;
customerOrderLinesStore[selectedRowId].data.Description = description;
if (customerOrderLinesStore[selectedRowId].data.OrderedQty === '')
{
customerOrderLinesStore[selectedRowId].data.OrderedQty = orderedQty;
}
customerOrderLinesStore[selectedRowId].data.UoM = UoM;
customerOrderLinesStore[selectedRowId].data.SalesPrice = salesPrice;
customerOrderLinesStore[selectedRowId].data.Amount = amount;
customerOrderLinesStore[selectedRowId].data.LineStatus = lineStatus;
customerOrderLinesStore[selectedRowId].data.ReservedQty = reservedQty;
customerOrderLinesStore[selectedRowId].data.DeliveredQty = deliveredQty;
customerOrderLinesStore[selectedRowId].data.RemainingQty = remainingQty;
}
}
}
}
}
,
{
header: 'Description'
, dataIndex: 'Description'
, flex: 1
, editor:
{
xtype: 'textfieldext'
}
}
, {
header: 'Ordered Qty'
, dataIndex: 'OrderedQty'
//, flex: 1
, width: 80
// fixed default width (pcs)
, align: 'right'
, editor: {
xtype: 'numberfield'
, hideTrigger: true
, minValue: 0
, disabled: true
}
}
, {
header: 'UoM'
, dataIndex: 'UoM'
//, flex: 1
, width: 60 // fixed default width (pcs)
}
, {
header: 'Sales Price'
, dataIndex: 'SalesPrice'
//, flex: 1
, width: 80 // fixed default width (pcs)
, align: 'right'
, renderer: Ext.util.Format.numberRenderer('0.0000')
//, renderer: function (value) {
// return Ext.util.Format.number(value, '0.0000/i');
//}
, editor: {
xtype: 'numberfield'
, hideTrigger: true
, disabled: true
, decimalPrecision: 4
}
}
, {
header: 'Amount'
, dataIndex: 'Amount'
//, flex: 1
, width: 80 // fixed default width (pcs)
, align: 'right'
, renderer: Ext.util.Format.numberRenderer('0.00')
//, renderer: function (value) {
// return Ext.util.Format.number(value, '0.0000/i');
//}
}
, {
header: 'Line Status'
, dataIndex: 'LineStatus'
//, flex: 1
, width: 80 // fixed default width (pcs)
}
, {
header: 'Shipping Date'
, dataIndex: 'ConfShippingDate'
//, flex: 1
, width: 80 // fixed default width (pcs)
, align: 'center'
}
, {
header: 'Reserved Qty'
, dataIndex: 'ReservedQty'
//, flex: 1
, width: 80 // fixed default width (pcs)
, align: 'right'
}
, {
header: 'Delivered Qty'
, dataIndex: 'DeliveredQty'
//, flex: 1
, width: 80 // fixed default width (pcs)
, align: 'right'
}
, {
header: 'Remaining Qty'
, dataIndex: 'RemainingQty'
//, flex: 1
, width: 80 // fixed default width (pcs)
, align: 'right'
}
];

this.callParent(arguments);
}
});



It works if there is nothing on the grid and I start to insert new cells after pressing the button
Add New Line.


Ext.define('CustomerOrderLineGrid.controller.CustomerOrderLines', {
extend: 'Ext.app.Controller'
, stores: ['CustomerOrderLines', 'COLInventoryParts']
, models: ['CustomerOrderLine', 'COLInventoryPart']
, views: ['customerorderline.List'],

init: function () {
this.control(
{
'customerorderlinelist': {
select: this.updateFields
, deselect: this.updateAmount
}
});
}
,
Ext.get('AddNewLine').on('click', function () {
// Get the customer order lines store
var customerOrderLinesStore = Ext.getStore('CustomerOrderLines');
var nextCustomerLineNumber;
if (customerOrderLinesStore.data.length == 0) {
nextCustomerLineNumber = 10;
}
else {
// Get the biggest line number
var data = [];
customerOrderLinesStore.each(function (rec) {
data.push(rec.get('LineNumber'));
});

var maxLineNumber = Math.max.apply(Math, data);

// Add the next customer order line record in the store

nextCustomerLineNumber = parseInt(maxLineNumber + 10);
}

// Add element with id=0
customerOrderLinesStore.add({ LineNumber: nextCustomerLineNumber,
Id: 0
});

});
});


When I use the button without reading any element from the store, select event listener works, but if the grid is already populated with some read from the store, it doesn't work.

Wich event I should associate with the event listener at the 'editor' after the read from the store is made?

Best regards,
Tito Morais