ExtJS組合框通過PHP在頁面加載時從遠程存儲動態設置初始值

Question

我當前的問題涉及在員工詳細信息頁面中在與員工部門有關的ExtJS組合框中顯示初始值。

該頁面通過PHP檢索員工信息，因此所有對員工的引用都是通過PHP echo完成的（該站點使用CodeIgniter，這可能會混淆一些內容；它只是簡化了一些輸入，但其工作方式與普通PHP相同），即

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.
    ]
});

有一個部門部分，可通過組合框處理，以列出所有部門； 沒有什么花哨的（我相信），它只列出了所有部門：

    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'
            }
        }
    });

然后，上面的formPanel在comboBox中引用deptModel / deptStore：

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

上面的組合框可以正確呈現並提供所有部門。 但是，嘗試使用值初始化組合框的嘗試沒有用，從組合框的未更改到造成停止頁面渲染的錯誤的范圍不等。 我看了以下內容：

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'

我還查看了許多與渲染后加載商店，在商店加載中設置值，在渲染中設置值，在formPanel代碼之前設置值有關的帖子。 坦率地說，沒有一個有效，並且大多數指的是將值設置為列表中的第一個值，而不考慮我的特定問題。

理想情況下，我只想聲明

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

在頁面加載表單中顯示員工的詳細信息時，使組合框顯示相關部門（即“帳戶”）。

我要去哪里錯了？ 為什么value: {value}在實踐中什么都不做？ 任何人都可以提供一個簡單的解釋，以將組合框插入到formPanel中的正確形式，如果當前的實現不正確，則允許在頁面加載時選擇該組合框中的初始值？

Answer 1

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'
    }
}
});

資料模型：

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

控制器：

    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));

模型：

    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());
    }

這是您的要求：

{
  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 ?>)
})

Answer 2

我會盡力幫助您，但您應該糾正一些錯誤。 例如，您已經創建了如下數據模型：

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

但是，數據模型應為：

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

因此，您應該在store config中定義代理屬性，而不是在數據模型中定義！ 原因是商店與服務器端交互，數據模型只是對數據建模。

var deptStore = new Ext.data.JsonStore({
    model: 'DeptModel',
    proxy: {
        type: 'ajax',
        url: '<?php echo base_url() ?>Settings/JSON/Departments',
        reader: {
            type: 'json',
            root: 'deptList',
            idProperty: 'DEP_ID'
        }
    }
});

在這里，我定義了一個簡單的商店。 您必須注意root和idProperty屬性。 您應該給出Json對象的名稱，如下所示：

// return value from model
$sql = $this->db->query('SELECT DEP_ID, ......');
return array('deptList' => $sql->result_array());

// return value from controller
$data = $this->db->get_dept_list($arg);
echo json_encode('$data');

同樣， idProperty也很重要，它應該是唯一值，才能消除值沖突。

這是我的應用程序的示例屏幕截圖。 如您所見，當用戶從DNR TİPİ選擇一個值時，應用程序會自動填充ÌNDİRİM TİPİNİ SEÇİNİZ組合框！

在屏幕截圖中， discDetail等於您的deptList 。