Given this class:
Ext.define('App.view.user.UserDetails', {
extend: 'Ext.window.Window'
,alias: 'widget.userdetails'
,id: 'userdetails'
,title: 'User Details'
,height: 300
,width: 380
,items: [{
xtype: 'fieldset',
title: 'Information',
margin: '5',
width: 350,
height: 250,
defaults: {xtype: 'displayfield', margin: '3', labelWidth: 100, width: 300},
items: [{
// you should avoid using fixed id that will prevent using the component
// multiple times
// id: 'id',
width: 150,
fieldLabel: 'User Id'
,itemId: 'userId' // <= add item id for easy retrieval
},{
// id: 'email',
width: 250,
fieldLabel: 'User Email'
,name: 'userEmail' // <= or a name, as is logical for a field
}]
}]
});
You can use component queries to get a reference to your field and set its value:
var win = Ext.create('App.view.user.UserDetails', {
autoShow: true
});
// query by itemId
win.down('#userId').setValue(123);
// or by name
win.down('field[name=userEmail]').setValue('user@example.com');
Or you can nest a form in your window so that you can use setValues
(and other form features):
Ext.define('App.view.user.UserDetails', {
extend: 'Ext.window.Window'
,alias: 'widget.userdetails'
,id: 'userdetails'
,title: 'User Details'
,height: 300
,width: 380
,layout: 'fit'
,items: [{
xtype: 'form'
,items: [{
xtype: 'fieldset',
title: 'Information',
margin: '5',
width: 350,
height: 250,
defaults: {xtype: 'displayfield', margin: '3', labelWidth: 100, width: 300},
items: [{
width: 150,
fieldLabel: 'User Id'
// name is required for setValues to work
,name: 'userId'
},{
// id: 'email',
width: 250,
fieldLabel: 'User Email'
,name: 'userEmail'
}]
}]
}]
});
var win = Ext.create('App.view.user.UserDetails', {
autoShow: true
});
win.down('form').setValues({
...
});