绑定文本字段标签以存储值

时间:2018-04-02 18:28:14

标签: extjs

我正在使用 CREATE TABLE Patient( pAdminNumber int NOT NULL, dID int NOT NULL, wID int NOT NULL, pName VARCHAR(50), DOB DATE, pGender CHAR(10), pAddress VARCHAR(50), pTelephone VARCHAR(50), PRIMARY KEY(pAdminNumber), FOREIGN KEY(dID) REFERENCES Doctor(dID), FOREIGN KEY(wID) REFERENCES Ward(wID) ); 现代工具包。我的所有显示标签都存储在ExtJs6.2中,我需要使用这些标签显示在DB上。

  

例如

form

{ xtype: 'textfield', readOnly: true, scrollable: false, label: ** showFromStore ** , labelAlign: 'top', name: 'someName', bind: '{SomeValue}' }, 上管理此展示的最佳方法是什么?

2 个答案:

答案 0 :(得分:2)

要绑定textfield或任何其他EXTJS component的所有配置,您可以使用bind配置。

  

实施例

Ext.create({
     xtype: 'textfield',
     bind: {
         label: '{user.label}',
         name: '{user.name}',
         value: '{user.value}',
     }
})

在此 FIDDLE 中,我使用viewmodelformpaneltextfield创建了一个演示版。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //defining view model
        Ext.define('MyViewModel', {
            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.myvm',

            data: {
                users: null
            },

            stores: {
                formstore: {
                    autoLoad: true,
                    fields: ['name', 'email', 'phone', 'namelabel', 'phonelabel', 'emaillabel'],
                    proxy: {
                        type: 'ajax',
                        url: 'data.json',
                        reader: {
                            type: 'json',
                            rootProperty: ''
                        }
                    },
                    listeners: {
                        load: function (store, data, success) {
                            Ext.ComponentQuery.query('#myform')[0].getViewModel().set('users', data[0]);
                        }
                    }
                }
            }
        });

        //creating form
        Ext.create({

            xtype: 'formpanel',

            itemId: 'myform',

            title: 'Form example',

            renderTo: Ext.getBody(),

            fullscreen: true,

            viewModel: {
                type: 'myvm'
            },

            defaults: {
                xtype: 'textfield',
                readOnly: true
            },

            items: [{
                bind: {
                    label: '{users.namelabel}',
                    value: '{users.name}'
                }
            }, {
                bind: {
                    label: '{users.emaillabel}',
                    value: '{users.email}'
                }
            }, {
                bind: {
                    label: '{users.phonelabel}',
                    value: '{users.phone}'
                }
            }]
        });
    }
});

JSON代码

[{
    "name": "Lisa Doshi",
    "email": "lisa@simpsons.com",
    "phone": "555-111-1224",
    "namelabel": "Full Name",
    "emaillabel": "Email Address",
    "phonelabel": "Phone Number"
}]

答案 1 :(得分:0)

我不知道如何创建一个小提琴来演示这个,但我会尽力提供所有细节

data returned from service is 
 [{"ID":"P1","Label":"Procedure"},{"ID":"P2","Label":"Process"},, 
 {"ID":"P3","Label":"Problem"}]

我正在商店中加载此数据

    Ext.define('My.store.myLabels',
    {
        alias: 'store.Lang',
        extend: 'Ext.data.Store',
        config:
        {
            fields: ['ID', 'Label'],
            pageSize: 10000,
            proxy:
            {
            type: 'jsonp',
            url: myserviceURL
        }
    }
});

现在如何从商店绑定单个值

xtype: 'textfield',
readOnly: true,
scrollable: false,
labelAlign: 'top',
name: 'Process',
itemId: 'P1',
bind:{
       value: '{somevalue}',
       label:  * how to bind the value of P1 here *,
} 

我尝试了一个公式:但是我必须为每个UI元素编写一个公式。 所以我的问题是:

  1. 如何从商店访问单个商品以将其绑定在此处,如:

    store.data.items [ “0”]。ID.P1

  2. 或如何访问该组件 ID / itemId触发了视图模型公式,以便我可以执行

    displayLabel: {
      get: function (get) {
            var store = Ext.StoreMgr.get('myLabels');
             //search the store based on item id of the component that 
              //triggered the formula
              if (index > -1) {
                return store.getAt(index).data.Label;
               }
    
         }
    

    }