Getting form panel data

[VijayBhaskar]

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]

On a form with ext js fields, you just need to use the getValues function on the form.