PDA

View Full Version : Filling combobox with model with foreign key



K4T
14 May 2012, 12:07 PM
Hi! I have a window for editing selected task. That window have form with combobox where user can choose one of four categories. The list of categories is loaded from the database. Single task is represented by TaskModel. When I click option to edit task, form is opened in a window and fields are filled with specified task data. The problem is that the task category is presented in the task model as a foreign key (categoryId). I want the current value of the combobox of categories was set to the task category name (not categoryId). Currently I am able to set only category id belongs to the task, because I have access to the task model field called CategoryId. How can I get the category name to which the edited task belongs knowing its id and set it as current value in combobox?

Screenshot:

35221

Task Model:


Ext.define('Tasks.model.Task', {
extend: 'Ext.data.Model',


fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'},
{name: 'categoryId', type: 'auto', defaultValue: null}
],
...
});


Category Model:


Ext.define('Tasks.model.Category', {
extend: 'Ext.data.Model',


fields: [
{name: 'id', type: 'int'},
{name: 'category', type: 'string'}
],
...
});


Method which open window with form filled with selected task model to edit:


showTaskWindow: function(task) {
var win = this.getTaskWindow(),
form = win.down('form');

form.loadRecord(task); //filling form with task data
win.show();
},


Window with form with category combobox:


Ext.define('Tasks.view.tasks.TaskWindow', {
extend: 'Ext.window.Window',


xtype: 'taskWindow',


...


initComponent: function() {
this.items = [
this.buildForm()
];


this.callParent();
},


buildForm: function() {
return {
xtype: 'form',
...
items: [
this.buildTitleField(),
this.buildCategoriesCombo()
]
},


buildCategoriesCombo: function() {
return {
xtype: 'combobox',
name: 'categoryId', // Displaying category id because I dont know how to get category name via id :/
// How to get category name field which is stored inside category model not task model?
fieldLabel: 'Category',
labelWidth: 60,
flex: 1,
displayField: 'category',
valueField: 'categoryId',
store: Ext.create('Tasks.store.Categories')
}
},
});


Tasks Store:


Ext.define('Tasks.store.Tasks', {
extend: 'Ext.data.Store',
model: 'Tasks.model.Task',
autoLoad: true
});


Categories Store:


Ext.define('Tasks.store.Categories', {
extend: 'Ext.data.Store',
model: 'Tasks.model.Category',
autoLoad: true
});





Thank you for your time.

friend
15 May 2012, 9:02 AM
In a nutshell, you have to make sure the combo's data store is loaded, prior to the underlying setValue() call on the combobox.