Problem setting record to panel from controller

[cassiopeia]

Hi,

I work with MVC.
I have a navigationview with a list. when you press the disclose button, an event is fired. the chosen record is passed with the event.

within the controller, I create a detailsview (this is a Panel), I add the record and then I push this detailsview onto the navigationview. the detailsview has fields which names correspond with the names from the model.

the problem is that I see the detailsview but the fields are empty.
The record isn't empty within the controller.



controller:

onMyRequestsDetails : function(record) {
                //this is the navigationview which is defined within REFS
                var view = this.getMyRequests();
                
                //this is the detailsview
                var request = Ext.create('LeaveRequest.view.Request' , {scrollable:true}) ;
                
                //the record I want to add
                request.setRecord(record) ;
                
                //push details on navigationview
                view.push(request);
            }

Detailsview:

...
initialize : function() {

                this.callParent(arguments);

               var leaveType = {
                    xtype : 'selectfield',
                    name : 'AbsenceTypeName',
                    id : 'AbsenceTypeName',
                    label : 'Leave type',
                    store : storeAT,
                    valueField : 'AbsenceTypeCode',
                    displayField : 'AbsenceTypeName',
                    cls : 'requestLeaveType'

                };

...
this.add([leaveType]);

...

Can somebody help?

[mitchellsimoens]

Is LeaveRequest.view.Request a form panel?

[cassiopeia]

I just tested it and it works!
I had Ext.Panel, not Ext.form.Panel

Thank you so much, I've been searching for days

[cassiopeia]

Unfortunatelly, this doesn't work for selectfield =(
textfields, no problem. so the code below will work, but I need a selectfield.

... initialize : function() {                  this.callParent(arguments);                 var leaveType = {                     xtype : 'textfield',                     name : 'AbsenceTypeName',                     id : 'AbsenceTypeName',                     label : 'Leave type',                     //store : storeAT,                     //valueField : 'AbsenceTypeCode',                     //displayField : 'AbsenceTypeName',                     cls : 'requestLeaveType'                  };  ... this.add([leaveType]);  ...

Do I need to do something special for this?

[mitchellsimoens]

The value you pass must be a value in the store based on the valueField. It will work just like any other field.

[cassiopeia]

It still doesn't work

Even when I pass an hardcoded value from the controller to the panel
(AbsenceTypeCode : '0101')
it will always display the first value from the store.

leaveType = {
                    xtype : 'selectfield',
                    name : 'AbsenceTypeCode',
                    id : 'AbsenceTypeCode',
                    label : 'Leave type',
                    store : storeAT,
                    valueField : 'AbsenceTypeCode',
                    displayField : 'AbsenceTypeName',
                    cls : 'requestLeaveType'

                };

[mitchellsimoens]

If the select field does not have a record by default the first option is picked. Here is an example of setRecord:

Ext.define('MyModel', {
    extend : 'Ext.data.Model',

    config : {
        fields : [
            'text',
            'select'
        ]
    }
});

Ext.Viewport.add({
    xtype : 'formpanel',
    items : [
        {
            xtype : 'textfield',
            label : 'Text',
            name  : 'text'
        },
        {
            xtype   : 'selectfield',
            label   : 'Select',
            name    : 'select',
            store   : {
                fields : [
                    'text',
                    'value'
                ],
                data   : [
                    { text : 'First Option',  value : 'first'  },
                    { text : 'Second Option', value : 'second' },
                    { text : 'Third Option',  value : 'third'  }
                ]
            }
        },
        {
            xtype   : 'button',
            text    : 'Set Value',
            handler : function(btn) {
                var form = btn.up('formpanel'),
                    rec  = new MyModel({
                        text   : 'Foo',
                        select : 'second'
                    });

                form.setRecord(rec);
            }
        }
    ]
});

[cassiopeia]

Thank you!
I finally found the problem.

I fill the selectfield with data from a store.

storeAT = Ext.create('LeaveRequest.store.AbsenceTypeStore');
...
var leaveType =
{
                    xtype : 'selectfield',
                    name : 'AbsenceTypeCode',
                    id : 'AbsenceTypeCode',
                    label : 'AbsenceTypeCode',
                    store : storeAT,
                    valueField : 'AbsenceTypeCode',
                    displayField : 'AbsenceTypeName'
}

The problem is that the fields of the selectfield have a different name than 'value' and 'text'.
So when I tried to set a different value, it couldn't match with anything from the options in selectfield,
so it just showed the first one.

So, when i replace the bold code above into this:

store : {
                        fields : ['text', 'value'],
                        data : [{
                                    
                                    value : '0200',
                                    text : 'Vacation'
                                }, {
                                    
                                    value : '0100',
                                    text : 'Sickness'
                                }]
                    }

then it works.
so i can't use a store in a selectfield.