PDA

View Full Version : place a upload button in a grid



VijayBhaskar
19 Dec 2012, 7:38 PM
Hi

I'm new to Extjs. I'm developped a grid which contains columns Notification name, EmailContent, Header, Logo. Now i want to put upload buttons in EmailContent, Header, and Logo columns

Here is my code



var companyCombo = Ext.create('lib.Commons.Components.FormFields.MailTrackComboBox',{
editable: false,
fieldLabel: 'Company',
emptyText: 'Select Company',
width:255,
cls:'reportcompanycls',
store:companystore,
displayField : 'name',
renderer : this.name (http://this.name/),
valueField: 'id',
listeners: {
select: function(combo, selection) {
var companyid = combo.getValue();
var customerKey = Ext.applyIf(companystore.findRecord('id', companyid)).data['customerKey'];
var admincontroller = Ext.create('mailtrack.controller.AdminController');
var whitelableresult = admincontroller.getWhiteLabelDataAction(customerKey);
Ext.getCmp('whitelabstatus').bindStore(whitelableresult);

}
},

});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 2,
autoCancel : false,
});

var checkboxSelModel = new Ext.selection.CheckboxModel();
var whitelabstatus = Ext.create('lib.Commons.Components.Grid.MailtrackGridPanel',{
width : 700,
height : 260,
border:true,
selModel : checkboxSelModel,
id:'whitelabstatus',
plugins : [cellEditing],
cls:'reportcompanycls',
columns: [
{
text : 'Id',
flex:1,
sortable : true,
renderer : this.id (http://this.id/),
dataIndex: 'id',
editor: "numberfield",
hidden: true

},{
text:'Notification Name*',
dataIndex:'name',
renderer : this.name (http://this.name/),
width : 180,

},{
text:'emailContent*',
width : 160,
// I NEED UPLOAD BUTTON HERE
editor : {
inputType: 'file',

}


},{
text:'header*',
// I NEED UPLOAD BUTTON HERE

width : 160,

},{
text:'Logo*',
// I NEED UPLOAD BUTTON HERE

width : 160,
},
]
});
var contactPhone = Ext.create('lib.Commons.Components.FormFields.MailTrackTextField',{
id : 'contactPhone',
name:'contactPhone',
fieldLabel: 'Contact Phone Number',
cls:'reportcompanycls',
});
var contactMail = Ext.create('lib.Commons.Components.FormFields.MailTrackTextField',{
id : 'contactEmail',
name:'contactEmail',
fieldLabel: 'Contact Email',
cls:'reportcompanycls',
vtype:'email',

});
var whitelabelsave = Ext.create('lib.Commons.Components.Standard.MailTrackButton',{
text:'Save',

});


var WhiteLabelOptions= Ext.create('lib.Commons.Components.Containers.MailTrackFormPanel', {
id:' whiteLabelOptions',
height:600,
width : 700,
border:false,
layout: {
type: 'vbox'
},
items :[companyCombo,
contactPhone,
contactMail,
whitelabstatus,
whitelabelsave]
});

var whitelabelcont = Ext.create('lib.Commons.Components.Containers.MailTrackPanel',{
id:' whitelabelcont',
height:725,
width : 1000,
border:false,
layout: {
type: 'vbox'
},
items :[WhiteLabelOptions/*,whitelabstatus,whitelabelinfo,*/]
});


Here is my output image
40895

And im also attaching my output image
Please give me replay

Thanks
Vijay Bhaskar

mitchellsimoens
21 Dec 2012, 9:17 AM
You would need a form surrounding the upload button. So you can either do it via regular HTML or use components. To use components then you need something like http://skirtlesden.com/ux/ctemplate

VijayBhaskar
21 Dec 2012, 11:50 PM
Thanks I'll definitely try it.......









Thanks
Vijay Bhaskar