PDA

View Full Version : Getting form panel data



VijayBhaskar
8 Nov 2012, 10:40 PM
Hi.......


I'm new to Extjs

i want to get form panel data. I have a form panel and in that a data view is present. I'm trying to get that view data.

Here is My view




Ext.define('mailtrack.view.core.js.campaign.DeployCampign', {
extend:'lib.Commons.Components.Containers.ZeeKoFormPanel',
alias: 'widget.deployCampaigns',
frame: false,
id: 'deployCampaign',
name: 'deployCampaign',
xtype: 'deployCampaign',

tpl: [
// '<div class="details">',
'<tpl for=".">',
'<div class="thumb-wrap">',
'<div class="thumb">',
(!Ext.isIE6? '<img src="http://localhost/mailtrack-svc/service/image-service/getImageData/template/{name}" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'http://localhost/mailtrack-svc/service/image-service/getImageData/template/{name}\')"></div>'),
'</div>',
'<span>{name}</span>',
'</div>',
'</tpl>'
// '</div>'
],

initComponent: function() {

//var campaignContent = Ext.state.Manager.get('campaignContent') ;
var campaignContent = this.campaignContent ;
console.dir("campContent"+campaignContent) ;
var store = this.campaignListStore ;
var templateView = Ext.create('lib.Commons.Components.Views.ZeeKoView', {
store: campaignContent,
id: 'templateView',
tpl: new Ext.XTemplate( //This data i want
'<tpl for=".">',
'<div">{content}</div>',
'</tpl>'
)
});

var templatePreview = Ext.create('lib.Commons.Components.Containers.ZeeKoFormPanel', {
height: 400,
width: 550,
id: 'templatePreview',
autoScroll: true,
items:[templateView]
});

var campaignInfo = Ext.create('lib.Commons.Components.Containers.ZeeKoFormPanel', {
xtype: 'fieldset',

title: 'Campaign Information',
height: 400,
width: 550,
autoScroll: true,
defaultType: 'textfield',
layout: {
type: 'table',
columns: 2,
},
defaults: {
border: false
},
items:[{
xtype: 'textfield',
fieldLabel: 'CampaignName',
id: 'campaignName',
labelWidth: 50,
allowBlank: false,
readOnly: true,
emptyText: 'Enter Campaign Name',
value: 'test - 123'
},{
xtype: 'button',
text: 'Edit',
id: 'campaignEditBtn',
listeners: {
click: function(){
var campaignNameBtn = Ext.getCmp('campaignEditBtn') ;
var campaignFieldName = Ext.getCmp('campaignName') ;
if(campaignNameBtn.text == 'Edit'){
campaignNameBtn.setText = 'Save',
campaignFieldName.setReadOnly(false) ;
}else{
campaignNameBtn.setText = 'Edit',
campaignFieldName.setReadOnly(true) ;
}
}
}
},{
xtype: 'textfield',
fieldLabel: 'Campaign Subject',
id: 'campaignSubject',
labelWidth: 50,
allowBlank: false,
readOnly: true,
emptyText: 'Enter Campaign Subject',
value: 'test subject-123'
},{
xtype: 'button',
text: 'Edit',
id: 'campaignSubBtn',
listeners: {
click: function(){
var campaignSubjectBtn = Ext.getCmp('campaignSubBtn') ;
var campaignSubjectName = Ext.getCmp('campaignSubBtn');
if(campaignSubjectBtn.text == 'Edit'){
campaignSubjectBtn.setText = 'Save',
campaignSubjectName.setReadOnly(false) ;
}else{
campaignSubjectBtn.setText = 'Edit',
campaignSubjectName.setReadOnly(true) ;
}
}
}
}
]
});

var listInfo = Ext.create('lib.Commons.Components.Grid.MailtrackGridPanel', {
title: 'List Information',
height: 400,
width: 550,
id: 'campaignLists',
loadMask : true,
store: store,
columns: [{
text : 'List Name',
width: 550,
sortable : true,
flex:1,
renderer : this.name,
dataIndex: 'name'

},{
text : 'No of Contacts',
width: 550,
sortable: true,
flex:1,
renderer : this.id,
dataIndex: 'id'
}]
});

var dateField = Ext.create('lib.Commons.Components.Containers.ZeeKoFormPanel', {
id: 'scheduleDate',
layout: 'fit',
items:[{
fieldLabel: '<b>Select Your Date</b>',
name: 'ScheduleCampaign',
xtype: 'datefield'
}]
});

var sendTime = Ext.create('lib.Commons.Components.FormFields.ZeeKoRadioGroup', {
name: 'scheduleCampaigns',
id: 'scheduleOptions',
columns: 2,
items:[
{name: 'send', id: 'sendNow', inputValue: 'sendNow', boxLabel: 'Send Now', checked: true},
{name: 'send', inputValue: 'sendLater', boxLabel: 'Send Later'}
],
listeners: {
change: function(radiogroup, radio){
if(scheduleTime.getForm().getValues()['send'] == 'sendLater'){
Ext.getCmp('scheduleOptionsPanel').add(dateField);
}else{
Ext.getCmp('scheduleOptionsPanel').remove(dateField) ;
}
}
}
});

var scheduleTime = Ext.create('lib.Commons.Components.Containers.ZeeKoFormPanel', {
title: 'scheduleOptions',
id: 'scheduleOptionsPanel',
height: 400,
width: 550,
autoScroll: true,
items:[
sendTime
]
});

var leftPanel = Ext.create('lib.Commons.Components.Containers.ZeeKoFormPanel', {
id: 'leftPanel',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items:[templatePreview,listInfo]
});

var rightPanel = Ext.create('lib.Commons.Components.Containers.ZeeKoFormPanel', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items:[campaignInfo,scheduleTime]
});

var me = this ;
Ext.applyIf(me, {
height: 800,
width: 1600,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items:[
leftPanel,
rightPanel
]
});
me.callParent(arguments);
}
})





I include the a above view in my another view. and in that view i have a handler function. now i'm trying to get "templateView" data. for that




alert("templatePreview:: "+Ext.getCmp('templateView').getValue()) ;




But im not getting how can i get that tpl data
Please help me...


Thanks
Vijay Bhaskar

mitchellsimoens
10 Nov 2012, 3:47 PM
On a form with ext js fields, you just need to use the getValues function on the form.