1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    13
    Vote Rating
    0
    VijayBhaskar is on a distinguished road

      0  

    Default Unanswered: Getting form panel data

    Unanswered: Getting form panel data


    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

    Code:
    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

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

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


    Thanks
    Vijay Bhaskar

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,212
    Answers
    3517
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    On a form with ext js fields, you just need to use the getValues function on the form.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1