PDA

View Full Version : Use selected rows in Grid 1 to create Grid 2 in new window



papadiddy
12 Nov 2009, 8:22 PM
I am trying to use the selected rows from 1 grid to create a new grid in a new window. Currently, the data briefly displays in the new grid and then instantaneously disappears. I am new to ExtJS but I hope the code below is explains what I am trying to do:




var sm = new Ext.grid.CheckboxSelectionModel({
listeners: {
selectionchange: function(sm) {
if (sm.getCount()) {
grid.emailButton.enable();
} else {
grid.emailButton.disable();
}
}
}
});

var data = new Ext.data.Record.create([
{name: 'username'},
{name: 'email',},
{name: 'name'},
{name: 'created', type: 'date', dateFormat: 'Y-m-d h:i:s'}
]);

var grid = new Ext.grid.GridPanel({
renderTo:'homepage-id',
id:'user-grid',
ds: new Ext.data.JsonStore({
url: '/users',
root: 'items',
totalProperty: 'total',
fields: data,
}),
cm: new Ext.grid.ColumnModel([
sm,
{header: "Username", width: 60, sortable: true, dataIndex: 'username'},
{header: "Name", width: 100, sortable: true, dataIndex: 'name'},
{id: 'email', header: "email", width: 100, sortable: true, dataIndex: 'email'},
{header: "Created", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'created'},
]),
autoExpandColumn: 'email',
sm: sm,
listeners: {
render: function(g) {
g.store.load();
},
},
viewConfig: {
forceFit:true
},
tbar:
[
{
text:'Email',
tooltip:'Email user(s)',
ref: '../emailButton',
disabled: true,
handler: onEmail,
},
],
width:1000,
height:600,
frame:true,
title:'Users',
});

/**
* onEmail
*/
function onEmail() {
var selected = grid.getSelectionModel().getSelections();

var selmodel = new Ext.grid.CheckboxSelectionModel({});

var contacts = new Ext.grid.GridPanel({
store: new Ext.data.ArrayStore({
fields: data,
data: selected,
}),
cm: new Ext.grid.ColumnModel([
selmodel,
{id: 'email', header: 'Emails', sortable: true, dataIndex: 'email'}
]),
autoExpandColumn: 'email',
sm: selmodel,
listeners: {
render: function(g) {
g.store.loadData(selected);
g.getSelectionModel().selectAll();
},
},
viewConfig: {
forceFit:true
},
height: 380,
width: 190,
frame:false,
});

var form = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
items: [{
layout:'column',
items:[{
columnWidth:.3,
layout: 'fit',
title: 'Contacts',
iconCls:'silk-email-add',
items: contacts
},{
columnWidth:.7,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Subject',
name: 'last',
anchor:'95%'
},
{
xtype:'htmleditor',
id:'body',
fieldLabel:'Compose Email',
anchor:'95%'
}
]
}]
}],
buttons:[
{
text: 'Save',
handler: function() {
// something here later
}
},
{
text: 'Cancel',
handler: function(){
window.close();
}
}]
});

var window = new Ext.Window({
title: 'Email Selected User(s)',
modal: true,
width: 700,
height:400,
layout: 'fit',
plain:true,
items: form,
});
window.show();
}


Thanks,