ExtJS管理模板

时间:2017-07-10 17:27:54

标签: extjs associations

我未能成功获取管理仪表板模板中的绑定关联(具有从组合框中选择记录并在网格中提取相关记录的所需行为)。

我的主要viewModel定义为:

Ext.define('Admin.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',


    stores: {
        patients: {
            model: 'md_registry.model.Patient', 
            autoLoad: true
        }
    }

});

我向NavigationTree.js中的Pages添加了一个叶节点:

{
            text: 'Pages',
            iconCls: 'x-fa fa-leanpub',
            expanded: false,
            selectable: false,
            //routeId: 'pages-parent',
            //id: 'pages-parent',

            children: [

                {
                    text: 'Proc',
                    iconCls: 'x-fa fa-send',
                    rowCls: 'nav-tree-badge nav-tree-badge-hot',
                    viewType: 'procedure',
                    leaf: true
                }]
}

程序视图为:

Ext.define('Admin.view.pages.Procedure', {
    extend: 'Ext.panel.Panel',
    xtype: 'procedure',

    requires: [
        'Ext.panel.Panel',
        'Admin.model.Patient',
        'Admin.model.Procedure'
        //'Admin.model.Diagnosis'
    ],

    anchor : '100% -1',

    referenceHolder: true,


    width: 1000,
    height: 1000,
    referenceHolder: true,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },


    viewModel: 'main',
    session: {},

    items: [
        // https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield

        {
            xtype: 'fieldset',
            layout: 'anchor',
            items: [{
                xtype: 'combobox',
                listeners : {
                    select : function() {
                        console.log(arguments)
                        console.log(arguments[1].data.birth_date)
                        console.log(arguments[1].data.first_name)
                        console.log(arguments[1].data.last_name)
                        console.log(arguments[1].data.sex)

                    }
                },
                bind: {
                    store: '{patients}'
                },
                reference: 'patientCombo',
                publishes: 'id',
                fieldLabel: 'Patient Search',
                displayField: 'mrn',
                //anchor: '-',
                // We're forcing the query to run every time by setting minChars to 0
                // (default is 4)
                minChars: 2,
                queryParam: '0',
                queryMode: 'local',
                typeAhead: true,
                // https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
                doQuery: function(queryString, forceAll) {
                    this.expand();
                    this.store.clearFilter(!forceAll);

                    if (!forceAll) {
                        this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
                    }
                }


            }, {
                // https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
                xtype: 'displayfield',
                fieldLabel: 'Selected Patient',
                bind: {
                    html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
                    '{patientCombo.selection.last_name} </b></p>' +
                    '<p>Sex: {patientCombo.selection.sex}</p>' +
                    '<p>Birthdate: {patientCombo.selection.birth_date}</p>'
                }


            }]
        },


        {
            title: 'Procedures',
            xtype: 'grid',
            bind: '{patientCombo.selection.procedures}',
            flex: 1,
            margin: '0 0 0 10',
            columns: [{
                text: 'Procedure Date', dataIndex: 'proc_date', flex: 1
            }, {
                text: 'Procedure', dataIndex: 'proc_name', flex: 1
            }],

            plugins: [{
                ptype: 'rowexpander',
                rowBodyTpl : new Ext.XTemplate(
                    '<p><b>Proc Name Orig:</b> {proc_name_orig}</p>',
                    '<p><b>Proc Code:</b> {proc_code}</p>',
                    '<p><b>Proc Code Type:</b> {proc_code_type}</p>')
            }],

            viewConfig: {
                emptyText: 'No procedures',
                deferEmptyText: false
            }
        }]
});

我的患者和程序模型很简单:

Ext.define('Admin.model.Procedure', {
    extend: 'Ext.data.Model',

    idProperty: 'id',
    fields: [
        //{ name: 'id', type: 'string' },
        { name: 'proc_code', type: 'string' },
        { name: 'proc_name', type: 'string' },
        { name: 'proc_code_type', type: 'string' },
        { name: 'proc_name_orig', type: 'string' },
        { name: 'proc_date', type: 'date', format: 'Y-m-d' },
        {
            name: 'patient_id',
            type: 'string',
            reference: {
                parent: 'Admin.model.Patient',
                //type: 'md_registry.model.Patient',
                inverse: 'procedures',
                autoLoad: false
            }
        }
    ],

    proxy: {
        type: 'rest',
        url: 'http://127.0.0.1:5000/procedureview/api/read',
        reader: {
            type: 'json',
            rootProperty: ''
        }
    }

});

Ext.define('Admin.model.Patient', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.proxy.Rest'
    ],

    fields: [
        { name: 'id', type: 'string' },
        { name: 'mrn', type: 'string' },
        { name: 'birth_date', type: 'date', format: 'Y-m-d' },
        { name: 'sex', type: 'string' },
        { name: 'first_name', type: 'string' },
        { name: 'last_name', type: 'string' }
    ],

    proxy: {
        type: 'ajax',
        url: 'http://127.0.0.1:5000/patientview/api/read',
        reader: {
            type: 'json',
            rootProperty: ''
        }
    }

});

分别

我的患者商店的数据正好被加载到组合框中,但是当我从组合列表中选择一个项目时,它没有触发调用以获取相关的程序数据(参见图像:of no binding association

但是,绑定关联按预期与侧面导航选项卡一起工作(参见图像:of working binding association,并按预期显示在对象原型链中...参见

associations bound to model

(而对于管理仪表板,关联是空的)。

我不能为我的生活在管理仪表板中工作。我注意到一个名为绑定检查器的工具,但是我正在运行SDK的GPL版本,因此我无法访问它。除此之外,我无法找到一种方法来调试绑定关联在管理仪表板中不起作用的原因,但在侧面导航选项卡中工作得非常好。

我会设置一个小提琴,但我不知道如何使用管理模板。

1 个答案:

答案 0 :(得分:0)

我只是想通了。这是命名空间问题。

我在程序模型中的引用应该是:

reference: {
                parent: 'Patient',
                inverse: 'procedures',
                autoLoad: false
            }

Voila,所有相关数据都按预期加载!