ExtJS6:带有额外参数的商店的调用面板

时间:2017-10-30 18:16:38

标签: extjs extjs6

我有Panel,我打电话是这样的:

var relationshipsPanel = Ext.create('Test.view.RelationshipsPanel'); // ?store parameters?
Ext.getCmp('mainTabPanel').add(relationshipsPanel);

Panel有商店:

...
proxy: {
    type: 'ajax',
    api: {
        read: '_crud/tree_relationships.php?act=read' // &id_object=123
    },
    reader: {
        type: 'json'
    }
}
...

存储在使用id:

声明的Panel中
Ext.define('Test.view.RelationshipsPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.relationshipspanel',

    id: 'relationshipsPanel',
    itemId: 'relationshipsPanel'

    items: [
        {
            xtype: 'treepanel',
            scrollable: true,
            autoLoad: true,
            store: 'relationships', // store id
            columns: [
                ...
            ]
        }
    ]

});

商店本身在申请中声明:

Ext.application({
...
    stores: [
        'relationships'
    ]
...

我想设置商店参数id_object=123。最后,api查询read应如下所示:_crud/tree_relationships.php?act=read&id_object=123

如何使用带有GET额外参数的商店调用Panel?

1 个答案:

答案 0 :(得分:1)

Ext.data.proxy.Proxy 在内部使用 Ext.data.Connection ,允许extraParams发送其他参数。

您可以使用if动态创建存储或在init方法内创建:

<script type="text/javascript">
function checkPass() {
var pass1 = document.getElementById('password');
var pass2 = document.getElementById('password2');
var message = document.getElementById('confirmMessage');

var goodColor = "#fff";
var goodColored = "#087a08";
var badColor = "#fff";
var badColored = "#ed0b0b";

if(password.value == password2.value) {
  password2.style.backgroundColor = goodColor;
  message.style.color = goodColored;
  message.innerHTML = "<i class='fa fa-check'></i>"
}
else {
  password2.style.backgroundColor = badColor;
  message.style.color = badColored;
  message.innerHTML = "<i class='fa fa-close'></i>"
}
}  
</script>

如果你想用params加载商店:

proxy: {
  type: 'ajax',
  api: {
    read: '_crud/tree_relationships.php?act=read' // &id_object=123
  },
  reader: {
      type: 'json'
  },
  extraParams: {
    id_object: 123
  }
}

或者您可以在init方法中执行:

store.load({params: { id_object: 123 }});

Sencha Fiddle: https://fiddle.sencha.com/#fiddle/2931&view/editor

商店文档: http://docs.sencha.com/extjs/6.0.1/modern/Ext.data.Store.html

连接文档: http://docs.sencha.com/extjs/6.0.1/classic/Ext.data.Connection.html#cfg-extraParams