PDA

View Full Version : Click grid row - launch panel - pass a param to new panel



qt4x11
19 Mar 2012, 1:54 PM
I have a GridPanel that is configured to generate an alert when one of the grid rows are double clicked - the alert merely prints out the companyID associated with that row in the grid.



Ext.define('Ext.company.EditCompanyGrid', {
extend : 'Ext.grid.GridPanel',
alias : 'widget.company-EditCompanyGrid',


title : 'Edit Companies',
xtype : 'grid',
itemId : 'EditCompanyGrid',


initComponent : function() {
this.on('itemdblclick', function(me, record){
alert(record.data.companyID);


});

this.columns = [{
dataIndex : 'companyName',
header : 'Company Name',
sortable : true,
flex : 1
}];


this.store = Ext.create('Ext.data.Store', {
model : 'Ext.company.EditCompanyModel',
root : {
expanded : true
},
proxy : {
type : 'ajax',
url : '/servlet/CompanyServlet?action=companyList'
},
folderSort : true,
autoLoad : true
});


this.callParent(arguments);
}


});


I want to modify the 'itemdblclick' function so that a new Ext.form.Panel is launched. But I want to use the value of data.companyID obtained from the grid row to load form data in the Ext.form.Panel that is launched, mainly to append to my url: config parameter in my formPanel - so that I can get the record by ID.


I'm not sure how this would be done. Is it possible to pass companyID to a new panel by double clicking a grid row? Thanks for any suggestions.

vietits
19 Mar 2012, 4:01 PM
Below is one of solutions for your request


initComponent : function() {
this.on('itemdblclick', function(me, record){
var form = Ext.create('Ext.form.Panel', {
...
});
form.load({
params: {
companyId: record.get('companyId')
},
....
});

});

qt4x11
21 Mar 2012, 8:36 AM
Thanks - I managed to get it partially working, using your advice as a starting point. What I did was to create a new Ext.Window on itemdblclick with my form inside of it.

This seems to work good, and I'm passing my companyID to my form inside the window as a param - however, I'm not sure how to retrieve this companyID inside of my form? is there a way to getParam() that this form was loaded with??



initComponent : function() {
this.on('itemdblclick', function(me, record) {
var win = new Ext.Window({
title : 'Edit Company',
width : 625,
items : [ {
xtype : 'form',
items : [ {
// this is where the subclass of FormPanel goes
xtype : 'company-EditCompanyByIDForm'
} ]
} ],
listeners : {
show : function() {
var form = Ext.getCmp('company-EditCompanyByIDForm');
if (form) {
alert('here');
alert(record.data.companyID);


form.load({
params : {
companyId : record.data.companyID
}
});
}
}
}
});
win.show();
});

qt4x11
21 Mar 2012, 1:36 PM
I have a working solution using vietits help and other information from these forums. I'm not sure if this is the most elegant solution but it's what I have right now


initComponent : function() {

this.on('itemdblclick', function(me, record) {
this.openWindow(record);
});


this.columns = [ {
dataIndex : 'companyName',
header : 'Company Name',
sortable : true,
flex : 1
} ];


this.store = Ext.create('Ext.data.Store', {
model : 'Ext.company.EditCompanyModel',
root : {
expanded : true
},
proxy : {
type : 'ajax',
url : '/liveexpert/leservlet/CompanyServlet?action=companyList'
},
folderSort : true,
autoLoad : true
});

this.openWindow = function(record) {
alert(record.data.companyName);


var form = new Ext.form.Panel(
{
frame : true,
bodyPadding : '10 70 10 50',
waitMsgTarget : true,
alias : 'widget.company-EditCompanyByIDForm',
id : 'company-EditCompanyByIDForm',
buttonAlign: 'center',
fieldDefaults : {
labelAlign : 'left',
labelWidth : 190,
msgTarget : 'side'
},
// The fields
defaultType : 'textfield',
items : [ {
xtype: 'hiddenfield',
value: record.data.companyID,
name: 'companyID'
}, {
fieldLabel : 'Company Name',
name : 'companyName',
size : 30,
value: record.data.companyName,
allowBlank : false
}, {
fieldLabel : 'Images URL',
name : 'defaultImageURL',
size : 30,
value: record.data.defaultImageURL,
allowBlank : false
}, {
xtype: 'radiogroup',
fieldLabel: 'Use Customer Segments',
name:'useCustomerSegments',
id:'useCustomerSegments',
columns: 1,
vertical: true,
items: [
{boxLabel: 'No', name: 'useCustomerSegments', inputValue: '0'},
{boxLabel: 'Yes', name: 'useCustomerSegments', inputValue: '1'},
]
}, {
fieldLabel : 'Company Website Base URL',
name : 'studioDisplayBaseURL',
size : 30, }, {
fieldLabel : 'View Order JSP',
name : 'viewOrderJsp',
value: record.data.viewOrderJsp,
size : 30
}, {
fieldLabel : 'Update File Directory',
name : 'updateFileDirectory',
value: record.data.updateFileDirectory,
size : 30
}, {
fieldLabel : 'Rental Agreement Directory',
name : 'rentalAgreementDirectory',
value: record.data.rentalAgreementDirectory,
size : 30
}, {
xtype: 'radiogroup',
fieldLabel: 'Require Username in Email Format',
name:'requireEmailUsername',
id:'requireEmailUsername',
columns: 1,
vertical: true,
items: [
{boxLabel: 'No', name: 'requireEmailUsername', inputValue: '0'},
{boxLabel: 'Yes', name: 'requireEmailUsername', inputValue: '1'},
]
}, {
xtype: 'radiogroup',
fieldLabel: 'Display callback',
name:'displayCallback',
id:'displayCallback',
columns: 1,
vertical: true,
items: [
{boxLabel: 'No', name: 'displayCallback', inputValue: '0'},
{boxLabel: 'Yes', name: 'displayCallback', inputValue: '1'},
]
}, {
xtype : 'fieldset',
title : 'LDAP',
defaultType : 'textfield',
padding : '0 0 0 0',
columnWidth: 0.5,
items : [ {
fieldLabel : 'LDAP URL',
name : 'ldapURL',
value: record.data.ldapURL,
size : 30
}, {
fieldLabel : 'LDAP User Attribute',
name : 'ldapUserAttribute',
value: record.data.ldapUserAttribute,
size : 30
}, {
fieldLabel : 'LDAP Security Group',
name : 'ldapSecurityGroup',
value: record.data.ldapSecurityGroup,
size : 30
} ]
}, {
xtype : 'fieldset',
title : 'Email Information',
defaultType : 'textfield',
padding : '0 0 0 0',
items : [ {
fieldLabel : 'Email Body HTML',
name : 'emailBodyHtml',
value: record.data.emailBodyHtml,
size : 30
}, {
fieldLabel : 'Email Body Txt',
name : 'emailBodyTxt',
value: record.data.emailBodyTxt,
size : 30
}, {
fieldLabel : 'Email Subj',
name : 'emailSubj',
value: record.data.emailSubj,
size : 30
}, {
fieldLabel : 'Email From Address',
name : 'emailFromAddress',
value: record.data.emailFromAddress,
size : 30
} ]
} ],
buttons: [
{
text: 'Submit',
handler: function(){
var form = this.up('form').getForm();
var companyID = form.findField("companyID").getValue();
var companyName = form.findField("companyName").getValue();
var defaultImageURL = form.findField("defaultImageURL").getValue();
var useCustomerSegments = form.findField("useCustomerSegments").getValue();
var studioDisplayBaseURL = form.findField("studioDisplayBaseURL").getValue();
var updateFileDirectory = form.findField("updateFileDirectory").getValue();
var rentalAgreementDirectory = form.findField("rentalAgreementDirectory").getValue();
var requireEmailUsername = form.findField("requireEmailUsername").getValue();
var displayCallback = form.findField("displayCallback").getValue();
var ldapURL = form.findField("ldapURL").getValue();
var ldapUserAttribute = form.findField("ldapUserAttribute").getValue();
var ldapSecurityGroup = form.findField("ldapSecurityGroup").getValue();
var emailBodyHtml = form.findField("emailBodyHtml").getValue();
var emailBodyTxt = form.findField("emailBodyTxt").getValue();
var emailSubj = form.findField("emailSubj").getValue();
var emailFromAddress = form.findField("emailFromAddress").getValue();

form.submit({
clientValidation: true,
url : '/liveexpert/leservlet/CompanyServlet?action=saveCompany',
params: {
companyID: companyID,
companyName: companyName,
defaultImageURL: defaultImageURL,
useCustomerSegments: useCustomerSegments,
studioDisplayBaseURL: studioDisplayBaseURL,
updateFileDirectory: updateFileDirectory,
rentalAgreementDirectory: rentalAgreementDirectory,
requireEmailUsername: requireEmailUsername,
displayCallback: displayCallback,
ldapURL: ldapURL,
ldapUserAttribute: ldapUserAttribute,
ldapSecurityGroup: ldapSecurityGroup,
emailBodyHtml: emailBodyHtml,
emailBodyTxt: emailBodyTxt,
emailSubj: emailSubj,
emailFromAddress: emailFromAddress
},
success: function(form, action) {
Ext.Msg.alert('Success', 'Form submitted successfully');
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.errorMessage);
}
}
});
}
} ]
});

var win = new Ext.Window({
title : 'Edit Company',
width : 625
});
win.add(form);
win.show();
Ext.getCmp('useCustomerSegments').setValue(record.data.useCustomerSegments);
Ext.getCmp('requireEmailUsername').setValue(record.data.requireEmailUsername);
Ext.getCmp('displayCallback').setValue(record.data.displayCallback);
};