PDA

View Full Version : grid with two sm=Ext.grid.CheckboxSelectionModel(); and sm: .RowSelection



vijaypatil12
16 Nov 2010, 11:18 PM
I have grid with two sm , i.e. var sm = new xg.CheckboxSelectionModel(); and sm: new Ext.grid.RowSelectionModel({

but only one is working, CheckboxSelection is not working, what should i do to work both

please find my code in details, I have highlited where i have problem

// code start

var xg = Ext.grid;
var sm = new xg.CheckboxSelectionModel();

var viewport = new Ext.Viewport({

layout: {
type: 'vbox',
align: 'stretch'
},

items: [{
flex: 1,
xtype: 'container',
layout: 'border',
items: [

new Ext.BoxComponent({
region: 'north',
contentEl: 'header',
height: 74

}), {
region: 'south',
//contentEl: 'example-grid-south',
xtype: 'grid',
store: store1,
columns: [
{header: "Secondary Source", width: 100, dataIndex: 'Secondary Source', sortable: true},
{header: "Alarm Time", width: 100, dataIndex: 'Alarm Time', sortable: true},
{header: "Affected Customers", width: 100, dataIndex: 'Affected Customers', sortable: true},
{header: "Applied Threshold", width: 100, dataIndex: 'Applied Threshold', sortable: true},
{header: "Degradation", width: 100, dataIndex: 'Degradation', sortable: true},
{header: "Distance from Nearest Site", width: 100, dataIndex: 'Distance from Nearest Site', sortable: true},
{header: "Last Confirmation Time", width: 100, dataIndex: 'Last Confirmation Time', sortable: true},
{header: "Maximum Position", width: 100, dataIndex: 'Maximum Position', sortable: true},
{header: "Minimum Position", width: 100, dataIndex: 'Secondary Source', sortable: true},
{header: "Nearest Site", width: 100, dataIndex: 'Alarm Time', sortable: true},
{header: "Position", width: 100, dataIndex: 'Affected Customers', sortable: true},
{header: "Status", width: 100, dataIndex: 'Applied Threshold', sortable: true},
{header: "Threshold Type", width: 100, dataIndex: 'Degradation', sortable: true},
{header: "Threshold Value", width: 100, dataIndex: 'Distance from Nearest Site', sortable: true},
{header: "Type", width: 100, dataIndex: 'Last Confirmation Time', sortable: true},
{header: "1st External NMS Reference", width: 100, dataIndex: 'Maximum Position', sortable: true},
{header: "2nd External NMS Reference", width: 100, dataIndex: '2nd External NMS Reference', sortable: true},
{header: "Fiber Code", width: 100, dataIndex: 'Fiber Code', sortable: true},
{header: "OTAU Port", width: 100, dataIndex: 'OTAU Port', sortable: true},
{header: "OTDR Name", width: 100, dataIndex: 'OTDR Name', sortable: true},
{header: "Optical Route Name", width: 100, dataIndex: 'Optical Route Name', sortable: true},
{header: "ROTAU Port", width: 100, dataIndex: 'ROTAU Port', sortable: true},
{header: "RTU Name", width: 100, dataIndex: 'RTU Name', sortable: true},
{header: "Site Name", width: 100, dataIndex: 'Site Name', sortable: true}

],
//header: true,
split: true,
height: 110,
//minSize: 100,
//maxSize: 500,
collapsible: true,
//collapseMode: 'mini',
autoScroll: true,
title: 'South region',
margins: '0 0 0 0'
}, {
region: 'east',
title: 'East region',
header:true,
collapsible: true,
//collapseMode: 'mini',
split: true,
width: 540,
minSize: 100,
maxSize: 1900,
margins: '0 0 0 0',
contentEl: 'example-grid-east',
autoScroll: true

},
{
region: 'center',
title: 'Center region',
//margins: '0 0 10 0',
xtype: 'grid',
//autoExpandColumn : true,
//autoExpandMax : 400,
autoExpandColumn: 'primarysource',
store: store,
columns: [
{header: "id", width: 120, dataIndex: 'id', sortable: true, hidden:true},
{header: "Primary Source", width: 122, dataIndex: 'Primary_Source', sortable: true, id:'primarysource'},
{header: "Alarm Type", width: 150, dataIndex: 'Alarm_Type', sortable: true, id:'alarmtype'},
{header: "Alarm Time", width: 120, dataIndex: 'Alarm_Time', sortable: true},
{header: "Severity", width: 120, dataIndex: 'Severity', sortable: true, renderer: severity},
{header: "State", width: 100, dataIndex: 'state', sortable: true, renderer: state},
{header: "Last Modified", width: 115, dataIndex: 'lastmodified', sortable: true},
{header: "Acting User", width: 105, dataIndex: 'actinguser', sortable: true},
{header: "View Trace", width: 105, dataIndex: 'viewtrace', sortable: true, renderer:
function(value, metaData, record, rowIndex, colIndex, store){return '<a href = "#" onClick="javascript:openNewWindow()">' + value + '</a>'; }},
sm
],



sm: sm, // This is not working

bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm,index,record) {

var array = new Array();
store2.each(function(reco) {
if (reco.data.base_id == record.data.id) {
array.push(reco);
}
});

store1.removeAll();
for (var k=0; k < array.length; k++) {
store1.add(array[k]);
}
}
}
}),
autoScroll: true
}]
}

vijaypatil12
17 Nov 2010, 12:39 AM
hi Condor, could you please help me.

Thanks
Vijay Patil

moegal
17 Nov 2010, 3:31 AM
looks like the 2nd overwrites the first one. The last value you assign to a property is the one you will get.

Condor
17 Nov 2010, 10:55 AM
A CheckboxSelectionModel IS a RowSelectionModel, so you should be adding the rowselect event handler to the checkboxselectionmodel and not create an extra selectionmodel.