Form Panel and "loader" config

[Thorsten]

Hello all,

I could use some help with the "loader" config for an Form Panel.

I want to load some data from the server into the Form (an easy Login Form) at the time it is initialized. So i tried to use the "loader" option like below:

Ext.define('User.view.LoginView', {
	extend: 'Ext.form.Panel',
	alias: 'widget.loginview',
	title: 'Login',
	bodyPadding: 10,
	url: '#',
	layout: 'anchor',
	defaults: {
		anchor: '50%'
	},
	
	defaultType: 'textfield',
	items: [{
		fieldLabel: 'Login',
		name: '_username'
	},{
		fieldLabel: 'Passwort',
		name: '_password'
	},{
		fieldLabel: 'Benutzer merken',
		name: '_remember_me',
		xtype: 'checkbox'
	},{
		name: '_csrf_token'
	}],
	loader: {
		url: GlobalData.devUrl + 'login/show.json',
		autoLoad: true,
		renderer: 'data'
	},

	initComponent: function() {
		this.callParent(arguments);
	}
});

The returned JSON:

{ 
"success": "true",
"data": {
		"_csrf_token": "....." ,
		"_username": "....." 
	}
}

The JSON Data is loaded properly, but the fields are not populated.

The form is populated properly if I use the "load()" method of the form itself in the Controller. See the code below.

Ext.define('User.controller.ViewportController', {
	extend: 'Ext.app.Controller',
	views: [
		'Viewport',
		'ProfileView',
		'LoginView'
	],
	stores: [
		'UserStore'
	],
	models: [
		'UserModel'
	],
	init: function() {
		this.control({
			'loginview': {
				beforerender: function(form, opts){
					form.load({url: GlobalData.devUrl + 'login/show.json'});
				}
			}
			
		});
	}
});

I can do it this way, but I am not sure if its the best way.

Another thing that worked in the Loader config was to use "renderer: 'component'". Then new fields were renderer into the form, but without values....

Maybe someone can explain this behavior to me.

Many thanks in advance and kind regards,
Thorsten.

[scottmartin]

I would use an ajax call and on success, use loadRecord(record) to add the data to the form.

Scott.