PDA

View Full Version : Grouping Grid with additional icons cause grouping the collapsed or expanded



webarnie
14 Feb 2011, 9:15 AM
I am using a grouping grid. On the grouping line, I have added 2 icons I want to use to pop up a window. The problem is when I click on the icons, the group is either collapsed or expanded and is called before my function. How can I stop this behavior? I do want to ability to expand and contract the group using the + - button.



/*
* File: accountHistory.ui.js
* Date: Fri Feb 11 2011 14:48:15 GMT-0500 (Eastern Standard Time)
*
* This file was generated by Ext Designer version xds-1.0.3.2.
* http://www.extjs.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* This file has been modified because Ext Designer does not support
* a grouping grid at this time.
*/
accountHistoryUi = Ext
.extend(
Ext.Window,
{
title : 'Account History',
width : 709,
height : 756,
closable : false,
layout : 'absolute',
id : 'accountHistory',
initComponent : function() {
this.items = [
{
xtype : 'tabpanel',
activeTab : 0,
height : 550,
width : 700,
plain : true,
x : -2,
y : 150,
id : 'accountHistoryTabPanel',
items : [
{
xtype : 'panel',
title : 'Online Payments',
itemId : '',
id : 'onlinePayments',
items : [ {
xtype : 'listview',
columnResize : false,
store : 'onlinePaymentStore',
columnSort : false,
ref : '../../onlinePaymentsGrid',
id : 'onlinePaymentsGrid',
columns : [
{
xtype : 'lvdatecolumn',
header : 'Date',
width : 0.1,
dataIndex : 'date'
},
{
xtype : 'lvdatecolumn',
header : 'Scheduled Payment Date',
dataIndex : 'schedulePaymentDate'
},
{
xtype : 'lvcolumn',
header : 'Transaction',
dataIndex : 'transaction',
width : 0.35
},
{
xtype : 'lvnumbercolumn',
header : 'Amount',
align : 'right',
dataIndex : 'amount'
},
{
xtype : 'lvcolumn',
header : 'Status',
dataIndex : 'status'
},
{
xtype : 'lvcolumn',
header : 'Source',
dataIndex : 'source'
} ]
} ]
},
{
xtype : 'panel',
title : 'Transactions',
id : 'transactions',
items : [ {
xtype : 'listview',
columnResize : false,
store : 'receviableViewTransactionStore',
id : 'receviableViewTransactionGrid',
columns : [
{
xtype : 'lvdatecolumn',
header : 'Date',
width : 0.1,
dataIndex : 'date'
},
{
xtype : 'lvcolumn',
header : 'Policy #',
dataIndex : 'policy'
},
{
xtype : 'lvcolumn',
header : 'Transaction',
dataIndex : 'transaction',
width : 0.35
},
{
xtype : 'lvcolumn',
header : 'Amount',
align : 'right',
dataIndex : 'amount'
},
{
xtype : 'lvnumbercolumn',
header : 'Balance',
dataIndex : 'balance',
align : 'right'
} ]
} ]
},
{
xtype : 'panel',
title : 'Policies',
height : 658,
width : 700,
id : 'policies',
items : [ {
xtype : 'grid',
title : 'Policies',
store : 'receviableViewPolicyStore',
height : 520,
enableColumnHide : false,
enableColumnMove : false,
enableColumnResize : false,
enableHdMenu : false,
collapsible: true,
animCollapse: false,
stripeRows : true,
ref : '../../policesGrid',
id : 'policesGrid',
columns : [
{
xtype : 'gridcolumn',
dataIndex : 'policy',
header : 'Policy #',
renderer: policyActions,
sortable : true,
resizable : false,
width : 100,
align : 'right',
editable : false,
hidden: true,
id : 'policy'
},
{
xtype : 'datecolumn',
dataIndex : 'processedDate',
header : 'Processed Date',
sortable : false,
resizable : false,
width : 100,
editable : false,
groupable : false,
hideable : false
},
{
xtype : 'datecolumn',
dataIndex : 'effectiveDate',
header : 'Effective Date',
sortable : false,
resizable : false,
width : 100,
editable : false,
groupable : false,
hideable : false
},
{
xtype : 'gridcolumn',
dataIndex : 'transaction',
header : 'Transaction',
sortable : false,
resizable : false,
width : 190,
editable : false,
groupable : false,
hideable : false
},
{
xtype : 'gridcolumn',
dataIndex : 'amount',
header : 'Amount',
sortable : false,
resizable : false,
width : 100,
align : 'right',
editable : false,
groupable : false,
hideable : false
},
{
xtype : 'numbercolumn',
dataIndex : 'balance',
header : 'Balance',
sortable : false,
resizable : false,
width : 100,
align : 'right',
editable : false
} ],

view : new Ext.grid.GroupingView(
{
forceFit : true,
groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "policy" : "Item"]})'
})

} ]
} ]
}, {
xtype : 'displayfield',
value : 'Name:',
x : 30,
y : 20,
name : 'name',
width : 40,
id : 'name'
}, {
xtype : 'displayfield',
value : 'Display Field',
x : 80,
y : 20,
name : 'customerName',
id : 'customerName'
}, {
xtype : 'displayfield',
value : 'Display Field',
x : 80,
y : 50,
name : 'account',
id : 'account'
}, {
xtype : 'displayfield',
value : 'Account:',
x : 20,
y : 50,
name : '',
width : 40,
id : ''
} ];
this.bbar = {
xtype : 'toolbar',
buttonAlign : 'center',
height : 30,
id : 'toolbar',
items : [ {
xtype : 'button',
text : 'Close',
iconAlign : 'right',
scale : 'medium',
width : 81,
ref : '../closeButton',
id : 'closeButton'
} ]
};
accountHistoryUi.superclass.initComponent.call(this);
}
});

function policyActions(value, rowIndex, colIndex) {
return String.format(value + '<b><img border="0" src="../../img/silk/icons/comment.png" alt="" onClick="comments(\''+ value +'\');return false;" /><img border="0" src="../../img/silk/icons/money.png" alt="$" onClick="futureInstallments(\''+ value +'\');return false;" /></b>');
}

function comments(policy) {
alert('comments');
}

function futureInstallments(policy) {
alert('futureInstallments');
}

jarrednicholls
16 Feb 2011, 11:31 AM
Hey Walt,

A quick fix, you will want to cancel the event passed to the onclick handler so it doesn't bubble up.



onClick="futureInstallments(\''+ value +'\', event);return false;"




function futureInstallments(policy, e) {
Ext.EventObject.setEvent(e).stopEvent();
alert(policy);
}

webarnie
16 Feb 2011, 12:50 PM
I tried your suggestion, however, it did not work. My event is called after the expand and contract. If events were reversed it would work. Can these events be reversed? or can i intercept the other call?

jarrednicholls
16 Feb 2011, 1:05 PM
I will have to get back to you on this one. Normally events bubble up and out, so if you clicked on the <img>, the event would fire on the <img> and then it would fire on the surrounding <b>, and then on the parent of that, and so on and so forth.

I would also suggest posting this question (and any general not-specific-to-Designer Ext JS questions) to the Ext JS Help Forum (http://www.sencha.com/forum/forumdisplay.php?40-Ext-Help).

webarnie
17 Feb 2011, 7:23 AM
The expand and + can contract are both icons on the grouping level. I suspect what I really need is a function for mouse clicks on the group and determines which icon was clicked forwarding the request to the appropriate function.
I did something like this before and what I actually did was disable the expanding and contracting of the groups. I did receive a response that Ext 3 was supposed to implement groupclick, groupmousedown etc. </SPAN>
http://www.sencha.com/forum/archive/index.php/t-75137.html (http://www.sencha.com/forum/archive/index.php/t-75137.html)
I do not see these functions in Ext 3? Am I missing something?
I also saw another posting that looks like what I want. I tried to implement the code but it errors out on


this.mainBody.on('mousedown', this.interceptMouse, this);


How can I implement



Ext.override(Ext.grid.GroupingView, {
renderUI : function(){
Ext.grid.GroupingView.superclass.renderUI.call(this);


// Intercept mouse event handling to add our extra group header mouse events

this.grid.processEvent = this.grid.processEvent.createInterceptor(this.processEvent, this);

this.mainBody.on('mousedown', this.interceptMouse, this);

if(this.enableGroupingMenu && this.hmenu){
this.hmenu.add('-',{
itemId:'groupBy',
text: this.groupByText,
handler: this.onGroupByClick,
scope: this,
iconCls:'x-group-by-icon'

});
if(this.enableNoGroups){
this.hmenu.add({
itemId:'showGroups',
text: this.showGroupsText,
checked: true,
checkHandler: this.onShowGroupsClick,
scope: this

});
}
this.hmenu.on('beforeshow', this.beforeMenuShow, this);
}
},


// private
// Filter mouse events to select those which target a group header.
// Extract the group field's value from the header Id.

processEvent : function(name, e){
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if(hd){
var gf = this.getGroupField();
var idPrefix = this.grid.getGridEl().id + '-gp-' + gf + '-';
var groupValue = hd.id.substring(idPrefix.length);
var groupValue = Ext.util.Format.htmlDecode(groupValue.substring(0, groupValue.lastIndexOf('-')));
if (groupValue) {
this.grid.fireEvent('group' + name, this.grid, gf, groupValue, e);
}
}
}
});


posting: http://www.sencha.com/forum/showthread.php?29866-how-to-get-groupID-for-grouingview&p=370943#post370943

In my code



/*
* File: accountHistory.ui.js

* Date: Fri Feb 11 2011 14:48:15 GMT-0500 (Eastern Standard Time)
*
* This file was generated by Ext Designer version xds-1.0.3.2.
* http://www.extjs.com/products/designer/
*
* This file has been modified because Ext Designer does not support
* a grouping grid at this time.
*/

accountHistoryUi = Ext
.extend(
Ext.Window,
{
title : 'Account History',
width : 709,
height : 756,
closable : false,
layout : 'absolute',
id : 'accountHistory',
initComponent : function() {
this.items = [
{
xtype : 'tabpanel',
activeTab : 0,
height : 550,
width : 700,
plain : true,
x : -2,
y : 150,
id : 'accountHistoryTabPanel',
items : [
{
xtype : 'panel',
title : 'Online Payments',
itemId : '',
id : 'onlinePayments',
items : [ {
xtype : 'listview',
columnResize : false,
store : 'receviableViewOnlinePaymentStore',
columnSort : false,
ref : '../../onlinePaymentsGrid',
id : 'onlinePaymentsGrid',
columns : [
{
xtype : 'lvdatecolumn',
header : 'Date',
width : 0.1,
dataIndex : 'date'

},
{
xtype : 'lvdatecolumn',
header : 'Sched Pmt Date',
dataIndex : 'schedulePaymentDate'

},
{
xtype : 'lvcolumn',
header : 'Transaction',
dataIndex : 'transaction',
width : 0.35,
/*
tpl: [
'<span <tpl if="transaction.length &gt; 50">ext:qtip="{transaction}"</tpl> >',
'{[ values.transaction.substring(0, 49) + "..." ]}',
'</tpl>',
'<tpl if="transaction.length &lt;= 50">',
'{transaction}',
'</tpl>',
'</span>'
]
*/

},
{
xtype : 'lvnumbercolumn',
header : 'Amount',
align : 'right',
dataIndex : 'amount'

},
{
xtype : 'lvcolumn',
header : 'Status',
dataIndex : 'status'

},
{
xtype : 'lvcolumn',
header : 'Source',
dataIndex : 'source'

} ]
} ]
},
{
xtype : 'panel',
title : 'Account Level',
id : 'transactions',
items : [ {
xtype : 'listview',
columnResize : false,
store : 'receviableViewTransactionStore',
id : 'receviableViewTransactionGrid',
columns : [
{
xtype : 'lvdatecolumn',
header : 'Date',
width : 0.1,
dataIndex : 'date'

},
{
xtype : 'lvcolumn',
header : 'Policy #',
dataIndex : 'policy'

},
{
xtype : 'lvcolumn',
header : 'Transaction',
dataIndex : 'transaction',
width : 0.35
},
{
xtype : 'lvcolumn',
header : 'Amount',
align : 'right',
dataIndex : 'amount'

},
{
xtype : 'lvnumbercolumn',
header : 'Balance',
dataIndex : 'balance',
align : 'right'

} ]
} ]
},
{
xtype : 'panel',
title : 'Policy Level',
height : 658,
width : 700,
id : 'policies',
items : [ {
xtype : 'grid',
title : 'Policies',
store : 'receviableViewPolicyStore',
height : 520,
enableColumnHide : false,
enableColumnMove : false,
enableColumnResize : false,
enableHdMenu : false,
collapsible: true,
animCollapse: false,
stripeRows : true,
ref : '../../policesGrid',
id : 'policesGrid',
columns : [
{
xtype : 'gridcolumn',
dataIndex : 'policy',
header : 'Policy #',
renderer: policyActions,
sortable : true,
resizable : false,
width : 100,
align : 'right',
editable : false,
hidden: true,
id : 'policy'

},
{
xtype : 'datecolumn',
dataIndex : 'processedDate',
header : 'Processed Date',
sortable : false,
resizable : false,
width : 100,
editable : false,
groupable : false,
hideable : false

},
{
xtype : 'datecolumn',
dataIndex : 'effectiveDate',
header : 'Effective Date',
sortable : false,
resizable : false,
width : 100,
editable : false,
groupable : false,
hideable : false

},
{
xtype : 'gridcolumn',
dataIndex : 'transaction',
header : 'Transaction',
sortable : false,
resizable : false,
width : 190,
editable : false,
groupable : false,
hideable : false

},
{
xtype : 'gridcolumn',
dataIndex : 'amount',
header : 'Amount',
sortable : false,
resizable : false,
width : 100,
align : 'right',
editable : false,
groupable : false,
hideable : false

},
{
xtype : 'numbercolumn',
dataIndex : 'balance',
header : 'Balance',
sortable : false,
resizable : false,
width : 100,
align : 'right',
editable : false

} ],

view : new Ext.grid.GroupingView(
{
forceFit : true,
groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "policy" : "Item"]})'

})

} ]
} ]
},
{
xtype: 'displayfield',
value: 'Name:',
x: 30,
y: 100,
name: 'name',
width: 40,
id: 'name'

},
{
xtype: 'displayfield',
value: 'Display Field',
x: 70,
y: 100,
name: 'customerName',
id: 'customerName'

},
{
xtype: 'displayfield',
value: 'Account:',
x: 230,
y: 20,
name: '',
width: 40,
id: ''

},
{
xtype: 'combo',
x: 280,
y: 20,
name: 'accountCombo',
autoScroll: true,
store: 'receviableViewAccountStore',
displayField: 'account',
allowBlank: false,
forceSelection: true,
hiddenName: 'name',
hiddenId: 'nameId',
hiddenValue: "name",
selectOnFocus: true,
mode: 'local',
typeAhead: true,
ref: 'accountCombo',
id: 'accountCombo',
listeners: {
'select' : function(combo, record, index) {
var customerName = record.get("name");
var account = record.get("account");
Ext.getCmp('customerName').setValue(customerName);
var paymentGrid = Ext.getCmp("onlinePaymentsGrid");
paymentGrid.store.filter('account', account);
paymentGrid.render();
//paymentGrid.refresh();

//receviableViewTransactionGrid.store.filter('account', account);

//policesGrid.store.filter('account', account);

}
}
}
];
this.bbar = {
xtype : 'toolbar',
buttonAlign : 'center',
height : 30,
id : 'toolbar',
items : [ {
xtype : 'button',
text : 'Close',
iconAlign : 'right',
scale : 'medium',
width : 81,
ref : '../closeButton',
id : 'closeButton'

} ]
};
accountHistoryUi.superclass.initComponent.call(this);
}
});


/**

* This function adds icons to the group level. The 2 icons are comments,

* comment.png and future installments, money.png

*
*
* @param value

* @param rowIndex

* @param colIndex

* @return

*/

function policyActions(value, rowIndex, colIndex) {
return String.format(value + '<b><img border="0" src="../../img/silk/icons/comment.png" alt="" onClick="comments(\''+ value +'\', event);return false;" /><img border="0" src="../../img/silk/icons/money.png" alt="$" onClick="futureInstallments(\''+ value +'\', event);return false;" /></b>');
}

/**

* This function pops up the comment window for a policy

*
* @param policy

* @return

*/

function comments(policy, e) {
Ext.EventObject.setEvent(e).stopEvent();
var winComments = new Ext.Window({
modal: true,
title: "Comments for Policy: " + policy,
center: true,
layout : "fit",
width : 500,
height : 300,
closeAction :"close",
plain : false,
buttons: [{
text : "Close",
handler : function(){
winComments.close();
}
}]
});

var commentsRecordDef = Ext.data.Record.create( [ {
name : 'policy',
mapping : 'policy'

},
{
name : 'comment',
mapping : 'comment'

}
]);

var commentsReader = new Ext.data.JsonReader( {
root : 'rows',
id: 'policy',
successProperty : 'success',
totalProperty : 'total',
messageProperty : "msg"

}, commentsRecordDef);

var commentsStore = new Ext.data.JsonStore({
storeId: 'commentStore',
root: 'rows',
url: '',
autoLoad: false,
autoSave : false,
reader : commentsReader,
messageProperty: 'msg',
data: {"success": "true", "msg": "", "total": "5", "rows":
[
{"policy": "920442-22AB",
"comment": "On 08/19/10 E-mail notification for billing was added"

},
{"policy": "920442-22AB",
"comment": "On 07/14/10 Check No. 7168962 was not sent to the insured. The amount of $33.00 was credited back to credit card"

},
{"policy": "920442-22AB",
"comment": "On 05/26/10 Dividend check #16094531 in the amount of $41.50 was processed to be effective 06/02/10"

},
{"policy": "922877-22AB",
"comment": "On 02/07/10 The policy was added to APP by bank account"

},
{"policy": "922877-22AB",
"comment": "On 02/08/10 E-mail notification for billing was added"

}
]
},
fields: [
{
name: 'policy',
allowBlank: false,
mapping: 'policy',
type: 'string'

},
{
name: 'comment',
allowBlank: false,
mapping: 'comment',
type: 'string'

}
]
});

var commentsListView = new Ext.list.ListView({
store: commentsStore,
emptyText: 'No data found',
loadingText: 'loading...',
multiSelect: false,
columnSort: false,
reserveScrollOffset: true,
columns: [
{header: "Comment", dataIndex: "comment"}
],
});

// filter the store by the account selected in the drop down

commentsListView.store.filter('policy', policy);
winComments.add(commentsListView);
winComments.show();
}


/**

* This function displays the future installment window for a policy

* @param policy

* @return

*/

function futureInstallments(policy, e) {
Ext.EventObject.setEvent(e).stopEvent();
var winFutureInstallments = new Ext.Window({
modal: true,
title: "Future Installments for Policy: " + policy,
center: true,
layout : "fit",
width : 800,
height : 300,
closeAction :"close",
plain : false,
buttons: [{
text : "Close",
handler : function(){
winFutureInstallments.close();
}
}]
});

var futureInstallmentsRecordDef = Ext.data.Record.create( [ {
name : 'policy',
mapping : 'policy'

},
{
name : 'paymentNumber',
type : 'int',
mapping : 'paymentNumber'

},
{
name : 'dueDate',
type : 'date',
mapping : 'dueDate'

},
{
name : 'amount',
type : 'float',
mapping : 'amount'

},
{
name : 'surcharge',
type : 'float',
mapping : 'surcharge'

},
{
name : 'advancePayment',
type : 'float',
mapping : 'advancePayment'

},
{
name : 'billAmount',
type : 'float',
mapping : 'billAmount'

} ]);

var futureInstallmentsReader = new Ext.data.JsonReader( {
root : 'rows',
id: 'policy',
successProperty : 'success',
totalProperty : 'total',
messageProperty : "msg"

}, futureInstallmentsRecordDef);

var futureInstallmentsStore = new Ext.data.JsonStore({
storeId: 'futureInstallmentsStore',
root: 'rows',
url: '',
autoLoad: false,
autoSave : false,
reader : futureInstallmentsReader,
messageProperty: 'msg',
data: {"success": "true", "msg": "", "total": "20", "rows":
[
{"policy": "920442-22AB",
"paymentNumber": 1,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 2,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 3,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 4,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 5,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 6,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 7,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 8,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 9,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920442-22AB",
"paymentNumber": 10,
"dueDate": "02/11/2010",
"amount": 119.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 119.90
},
{"policy": "920822-22AB",
"paymentNumber": 1,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 2,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 3,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 4,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 5,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 6,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 7,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 8,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 9,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
},
{"policy": "920822-22AB",
"paymentNumber": 10,
"dueDate": "02/11/2010",
"amount": 319.90,
"surcharge": 0.00,
"advancePayment": 0.00,
"billAmount": 319.90
}
]
},
fields: [
{
name: 'policy',
allowBlank: false,
mapping: 'policy',
type: 'string'

},
{
name: 'paymentNumber',
allowBlank: false,
mapping: 'paymentNumber',
type: 'int'

},
{
name: 'dueDate',
type: 'string',

mapping: 'dueDate'

},
{
name: 'amount',
allowBlank: false,
type: 'float',
mapping: 'amount'

},
{
name: 'surcharge',
type: 'float',
allowBlank: false,
mapping: 'surcharge'

},
{
name: 'advancePayment',
allowBlank: false,
type: 'float',
mapping: 'advancePayment'

},
{
name: 'billAmount',
allowBlank: false,
type: 'float',
mapping: 'billAmount'

}
]
});

?
var futureInstallmentsListView = new Ext.list.ListView({
store: futureInstallmentsStore,
emptyText: 'No data found',
loadingText: 'loading...',
multiSelect: false,
columnSort: false,
reserveScrollOffset: true,
columns: [
{header: "Installment Number", dataIndex: "paymentNumber"},
{header: "Due Date", dataIndex: "dueDate"},
{header: "Amount", tpl: '{amount:usMoney}', dataIndex: "amount"},
{header: "Surcharge Amount", tpl: '{surcharge:usMoney}', dataIndex: "surcharge"},
{header: "Advance Payment", tpl: '{advancePayment:usMoney}', dataIndex: "advancePayment"},
{header: "Amount To Be Billed", tpl: '{billAmount:usMoney}', dataIndex: "billAmount"}
],
});

// filter the store by the account selected in the drop down

futureInstallmentsListView.store.filter('policy', policy);
winFutureInstallments.add(futureInstallmentsListView);
winFutureInstallments.show();
}

jarrednicholls
17 Feb 2011, 8:12 AM
Moving to Ext JS Help forum for some more eyes to look over.

webarnie
20 May 2011, 6:26 AM
I finally solve the problem. First it helps to know what event you are trying to stop.
Problem: My group row has the usual group icons ( + -) plus 2 additional icon I added in the group renderer. I tried to stop the event but nothing happened, in fact I noticed that the group event fired before my event.
I then discover the grouping expand and contract where using onmousedown and I was using onClick. I changed my event to be onmousedown and everything works fine now
Does not work



return String.format(value + '<b><img border="0" src="../img/silk/icons/comment.png" alt="" onClick="comments(\''+ value +'\', event);return false;" /><img border="0" src="../img/silk/icons/money.png" alt="$" onClick="futureInstallments(\''+ value +'\', event);return false;" /></b>');



Works


return String.format(value + '<b><img border="0" src="../img/silk/icons/comment.png" alt="" onmousedown="comments(\''+ value +'\', event);return false;" /><img border="0" src="../img/silk/icons/money.png" alt="$" onmousedown="futureInstallments(\''+ value +'\', event);return false;" /></b>');


called function


function comments(policy, e) {
Ext.EventObject.setEvent(e).stopEvent();
var winComments = new Ext.Window({