使用 Extjs 4.2
我已经阅读了许多文档、谷歌、论坛，试图了解组件如何加载以及将它们放置在何处，例如商店、模型等，但仍然感到困惑。
这是我试图开始工作的一个例子
应用说明
包含联系人、项目、人员等的主菜单，应用程序首先加载以显示静态非数据驱动，然后使用点击显示联系人列表网格的联系人。用户然后单击联系人行并显示弹出编辑视图。
在 contacteditview 中，联系人被加载到表单中，此外表单还有一个组合框，用于加载 ContactTypes 存储。ContactType 应设置为该联系人记录的contacttype 值。
考虑到这是一个大型应用程序，执行此操作的常用方法是什么，我只想在需要时加载数据，即显示视图。
以下是我的一些困惑
您可以在应用程序配置中定义所有控制器、商店、模型、视图，但是无论您在查看哪个页面，都会加载所有内容。此外，如果您的商店有 autoLoad: true ，那么即使您没有查看该特定视图，也会对数据库进行所有商店的调用。
当您在控制器的 stores 或 models 属性中指定一个商店或模型时，这究竟是做什么的？它只是让您轻松引用商店，但没有实际创建它，还是创建它，或者它只是为了方便而设置 getter 和 setter 函数。例如，如果我在控制器的 store 属性中指定了一个商店，并且 autoLoad 为 true，则所有数据都已加载，无需执行任何其他操作。但我真正想要的是只有当我单击联系人并显示列表视图时才加载该商店。所以我设置了 autoLoad:false 并在我的列表函数中手动使用
this.getStore('Contacts'). 这很好用，但是使用控制器的存储和模型数组属性的目的是什么。我在调试器中看到，如果我不使用 store/model 属性，则会为这些 js 文件发出获取请求。抱歉，我知道这很多，但这对我来说很困惑，并且已经为此苦苦挣扎了一段时间。
最后，只有当您通过设置 autoLoad:false 并手动加载单击联系人按钮时，我才会加载联系人网格。现在，当用户单击编辑记录加载正常但我如何让组合框加载然后选择正确的值。我认为我的部分问题是了解商店模型是如何加载和实例化的。在我的组合框存储属性中，我已将 ContactType 指定为存储，但出现错误存储未定义，因此未加载 js 文件或未实例化存储。
到目前为止，这是我的代码。
应用程序代码
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': "lib/extux",
'Wakanda': "lib/extux/wakanda"
}
});
Ext.application({
name: 'SimplyFundraising',
autoCreateViewport: true,
requires: ['Ext.ux.Router', // Require the UX
'Wakanda.model'
],
controllers: ['Contacts'],
});
联系人控制器
Ext.define('SimplyFundraising.controller.Contacts', {
extend: 'Ext.app.Controller',
views: ['contacts.List', 'contacts.Edit'],
init: function() {
this.control({
'contactslist': {
itemdblclick: this.editContact,
removeitem: this.removeContact
},
'contactslist > toolbar > button[action=create]': {
click: this.onCreateContact
},
// 'contactsadd button[action=save]': {
// click: this.doCreateContact
// },
'contactsedit button[action=save]': {
click: this.updateContact
}
});
},
list: function() {
var mystore = this.getStore('Contacts')
mystore.load();
// mystore.proxy.extraParams = { $expand: 'ContactType'};
// var User = this.getContactModel();
// User.load(258, {
// success: function (user) {
// console.log("Loaded user 258: " + user.get('lastName'));
// }
// });
},
editContact: function(grid, record) {
var view = Ext.widget('contactsedit');
view.down('form').loadRecord(record);
this.addnew = false
},
removeContact: function(Contact) {
Ext.Msg.confirm('Remove Contact ' + Contact.data.lastName, 'Are you sure?', function(button) {
if (button == 'yes') {
this.getContactsStore().remove(Contact);
}
}, this);
},
onCreateContact: function() {
var view = Ext.widget('contactsedit');
this.addnew = true
},
// doCreateContact: function (button) {
// var win = button.up('window'),
// form = win.down('form'),
// values = form.getValues(),
// store = this.getContactsStore();
// if (form.getForm().isValid()) {
// store.add(values);
// win.close();
// }
// },
updateContact: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues(),
store = this.getContactsStore();
if (form.getForm().isValid()) {
if (this.addnew == true) {
store.add(values);
} else {
record.set(values);
}
win.close();
}
}
});
联系人查看列表
Ext.define('SimplyFundraising.view.contacts.List', {
extend: 'Ext.grid.Panel',
xtype: 'contactslist',
title: 'All Contacts',
store: 'Contacts',
autoHeight: true,
autoScroll: true,
viewConfig: {
loadMask: true
},
initComponent: function() {
this.tbar = [{
text: 'Create Contact',
action: 'create'
}];
this.columns = [{
header: 'Id',
dataIndex: '__KEY',
width: 50
}, {
header: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
header: 'Middle Name',
dataIndex: 'middleName',
flex: 1
}, {
header: 'Last Name',
dataIndex: 'lastName',
flex: 1
},
{
header: 'Type',
dataIndex: 'ContactType.name',
flex: 1
}
];
this.addEvents('removeitem');
this.actions = {
removeitem: Ext.create('Ext.Action', {
text: 'Remove Contact',
handler: function() {
this.fireEvent('removeitem', this.getSelected())
},
scope: this
})
};
var contextMenu = Ext.create('Ext.menu.Menu', {
items: [this.actions.removeitem]
});
this.on({
itemcontextmenu: function(view, rec, node, index, e) {
e.stopEvent();
contextMenu.showAt(e.getXY());
return false;
}
});
this.callParent(arguments);
},
getSelected: function() {
var sm = this.getSelectionModel();
var rs = sm.getSelection();
if (rs.length) {
return rs[0];
}
return null;
}
});
联系人视图编辑
Ext.define('SimplyFundraising.view.contacts.Edit', {
extend: 'Ext.window.Window',
xtype: 'contactsedit',
title: 'Edit Contacts',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [{
xtype: 'form',
bodyStyle: {
background: 'none',
padding: '10px',
border: '0'
},
items: [{
xtype: 'textfield',
name: 'firstName',
allowBlank: false,
fieldLabel: 'Name'
}, {
xtype: 'textfield',
name: 'lastName',
allowBlank: false,
fieldLabel: 'Last Name'
}, {
xtype: 'combobox',
fieldLabel: 'Contact Type',
name: 'contactType',
store: 'ContactTypes',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a type...'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
}
});