ExtJS combobox set initial value dynamically from remote store on page load via PHP

Question

My current issue relates to showing an initial value in an ExtJS combobox relating to an employee's department in an employee detail page.

The page retrieves the employee information via PHP, so all the references to the employee are done through PHP echo (the site uses CodeIgniter, which may confuse some; it just simplifies some of the input but works in the same way as normal PHP), i.e.

var formPanel = Ext.create('Ext.form.Panel', {
    title: 'User Details',
    width: 300,
    renderTo: Ext.get('details'),
    store: userStore,
    defaultType: 'textfield',
    items:
    [
        {
            fieldLabel:'User Name',
            name: 'UserName',
            allowBlank: false,
            value: '<?php echo $Employee->UserName; ?>'
        },
        //More details in similar format etc.
    ]
});

There is a section for the departments, to be handled through a combobox, to list all departments; there is nothing fancy (I believe), it just lists all the departments:

    Ext.define('DeptModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name:'Id', type: 'int'},
            {name:'Name', type: 'string'}
        ]
    });

    var deptStore = Ext.create('Ext.data.Store', {
        model:'DeptModel',
        autoload: true,
        proxy: {
            // load using HTTP
            type: 'ajax',
            url: '<?= $site_url ?>Settings/JSON/Departments',
            reader: {
                type: 'json',
                model: 'DeptModel'
            }
        }
    });

The formPanel above then references the deptModel/deptStore in a comboBox:

{
    fieldLabel:'Department',
    xtype:'combo',
    name:'Department',
    forceSelection: true,
    typeAhead: true,
    allowBlank: false,
    emptyText: 'Choose a Department',
    store: deptStore,
    displayField: 'Name',
    valueField: 'Id'
}

The above combobox renders correctly and provides all the departments. Attempts to initialise the combobox with a value, however, have not worked, ranging from no change in the combobox to creating errors that stop the page rendering. I have looked at the following:

value: 5   // or any integer
value: '5' // or any string
value: <?php echo $Employee->DepartmentId ?> // or any PHP reference like those that work for the textfields e.g. the User Name above - DepartmentId has been checked to be an integer
value: '<?php echo $Employee->DepartmentId ?>' // stringifying the PHP reference
value: 'Accounts'

I have also looked at the numerous posts relating to loading stores after rendering, setting values on store loading, setting values on render, setting values before the formPanel code; quite frankly, none have worked, and most refer to setting the value to the first in the list which doesn't treat my particular issue.

Ideally, I want to simply state

value: <?php echo $Employee->DepartmentId ?>

to have the combobox display the relevant department (i.e. "Accounts") when the employee's details are displayed in the form on page load.

Where am I going wrong? Why does value: {value} not do anything in practice? Can anyone provide a simple explanation as to the correct form of inserting a combobox into a formPanel that allows for the initial value in said combobox to be picked on page load, if the current implementation is somehow incorrect?

Chances are, the store hasn't loaded the data before you try to set the value. You will have to wait to set the value until after the store has loaded. — forgivenson
I'd appreciate some guidance on the code needed to correctly set the value, or correctly load the store so that the value can be set and correctly displayed. I've tried to understand the various listings in the documentation for both stores and comboboxes, but I'm not seeing where best to load the store (or how given the available commands and the current setup) or set the value at the correct time - referring to my code would help for my understanding of the best place for any new code. — David Smithson
So, does your store load the data correctly? If you remove the line that sets the value initially, does the store load correctly and no errors occur? If so, then you will need to use an event, such as the store's load event, to fire off some code that sets the value of the combobox. Basically, you need to make sure the data is loaded before setting the value. — forgivenson
When "value" isn't being set, the store loads correctly and no errors occur. I have noticed, though, that the store doesn't seem to load until I interact with the combobox; hence my trying to understand when and where to load the store on page load, and when and where to set the value just after the store is loaded - but my understanding is very limited, and the documentation doesn't provide a suitable example! I've been able to set the value with a local store (see comment in below conversation with Oğuz Çelikdemir), but the departments must be retrieved from a remote store. — David Smithson

Oğuz Çelikdemir Oğuz Çelikdemir · Accepted Answer · 2014-01-08T14:12:53

JsonStore:

var articleMain = new Ext.data.JsonStore({
model: 'ArticleMainGroup',
autoLoad: true,
proxy: {
    type: 'ajax',
    url: '<?php echo base_url() ?>dashboard/create',
    extraParams: {
        type: 'article_group_main'
    },
    reader: {
        type: 'json',
        root: 'articleMainGroup',
        idProperty: 'ART_GROUP_ID'
    }
}
});

Data Model :

Ext.define('ArticleMainGroup', {
extend: 'Ext.data.Model',
fields: [
    {name: 'ART_GROUP_ID', type: 'int'},
    {name: 'WHG', type: 'int'},
    {name: 'WHG_BEZ', type: 'string'}
]
});

Controller:

    public function create()
{
    $type = $this->input->get('type', TRUE);

    // this parameter comes from ExtJS Extraparam
    switch ($type)
    {
        case 'dnr_type':
            $data = $this->dnr->get_dnr_type();
            exit(json_encode($data));
        case 'dnr_definition':
            $para = $this->input->get('dnrtype', TRUE);
            $data = $this->dnr->get_dnr_definition($para);
            exit(json_encode($data));
        case 'article_group_main':
            $data = $this->dnr->get_article_group_main();
            exit(json_encode($data));

Model:

    public function get_article_group_main()
    {
        $sql = $this->db->query('SELECT ART_GROUP_ID, WHG, CONCAT_WS(" - ", WHG, WHG_BEZ) AS WHG_BEZ FROM MD_ARTICLE_GROUP GROUP BY WHG_BEZ ORDER BY WHG');
        return array('articleMainGroup' => $sql->result_array());
    }

Here is your request :

{
  fieldLabel:'Department',
  xtype:'combo',
  name:'Department',
  forceSelection: true,
  typeAhead: true,
  allowBlank: false,
  emptyText: 'Choose a Department',
  store: deptStore,
  displayField: 'Name',
  valueField: 'Id',
  id: 'cmb-department'
}

// Add a listener to the combobox before store load
var combo = Ext.getCmp('cmb-department');
var cmbStore = combo.store;
cmbStore.on('load', function() {
   // setValue(777) // here, 777 is unique value that available in the store
   combo.setValue(<?php echo $Employee->DepartmentId ?>)
})

ExtJS combobox set initial value dynamically from remote store on page load via PHP

2 Answers