The top-level component Account (panel) adds the AccountGrid (gridpanel) subcomponent.
Account.js code:
initComponent: function() {
var me = this;
me.items = [];
me.items.push({
region : 'center',
xtype : 'accountgrid',
bind: {
title: me.title + '{selectionText}'
},
permissiveOpts: me.permissiveOpts
},{
region : 'east',
xtype : 'accountdetail',
width : 400,
title : '账号明细',
split : true,
collapsible : true,
collapsed : true,
collapseMode : 'mini'
},{
//Menu 添加、修改、查看对话框
xtype: 'accountwindow'
}
);
this.callParent(arguments);
}Code for AccountGrid:
Ext.define('Ims.view.ckcp.widget.AccountGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.accountgrid',
requires: [
'Ims.ux.GridToolBar',
'Ext.ux.form.SearchField',
'Ims.ux.form.field.UxTreePicker',
'Ims.ux.form.trigger.TriggerClear',
'Ims.ux.iconcls.Field'
],
reference: 'accountgrid',
bind: {
store: '{accountStore}'
},
columnLines: true,
multiSelect: false,
tools: [
{
type: 'refresh',
tooltip: '刷新数据',
handler: 'refreshBtnClick'
}, {
type: 'maximize',
hidden: true,
tooltip: '隐藏记录明细',
handler: 'hideDetailBtnClick'
}, {
type: 'restore',
tooltip: '显示记录明细',
handler: 'showDetailBtnClick'
}
],
bbar:{
xtype:'pagingtoolbar',
reference:'accountgridpagingtoolbar',
bind :{
store : '{accountStore}'
},
displayInfo: true,
emptyMsg: "没有需要显示的数据",
plugins: [
Ext.create('Ext.ux.ProgressBarPager')
]
},
columns: {
items: [
{
text:'***',
searchable: true,
dataIndex:'organizationCode'
},{
text: '***',
searchable: true,
dataIndex: 'customerName'
},
{
text:'***',
searchable: true,
dataIndex: 'accountNumber'
},{
text: '***',
searchable: true,
dataIndex: 'cardNumber'
},{
text: '***',
dataIndex: 'subAccountNumber'
},{
xtype:'datecolumn',
format:'Y-m-d',
text: '***',
searchable: true,
dataIndex: 'startTime'
},{
text: '***',
xtype: 'numbercolumn',
format:'0.0000',
dataIndex: 'rate'
},{
text: '***',
dataIndex: 'productName'
},{
text: '***',
dataIndex: 'checkStatus',
renderer:function (val) {
if (val == '0') return '***';
else if(val == '1') return '<font color="green">登记成功</font>';
else if(val ==2){
return '<font color="red">错误，请修改</font>';
}
else if(val == '3') return '待审核';
else if(val == '4') return '<font color="red">***</font>';
else if(val == '5') return '<font color="red">***</font>';
else if(val == '6') return '***'
else return '***';
}
},{
text: '状态',
dataIndex: 'status',
renderer:function (val) {
if (val == '0') return '***';
else if (val=='1') return '***';
else if(val==2) return '***';
else return '***';
}
}
],
defaults: {
flex: 1
}
},
listeners:{
afterrender:function () {
var me = this,
account = me.up("ckcpaccount"),
viewModel = account.getViewModel();
if(viewModel){
var collapseBtn = me.down('buttontransparent#collapse'),
expandBtn = me.down('buttontransparent#expand');
if (collapseBtn) collapseBtn.setHidden(!viewModel.get('showGridCollapseBtn'));
if(expandBtn) expandBtn.setHidden(!viewModel.get('showGridExpandBtn'));
}
}
},
initComponent: function () {
var me = this,
searchItems=[];
var viewModel = me.up('ckcpaccount').getViewModel();
var productStoreForComboStore = viewModel.getStore('productStoreForCombo');
searchItems.push({
xtype: 'combo',
reference: 'checkStatusCombo',
fieldLabel: '状态',
displayField: 'text',
valueField: 'id',
editable: false,
name: 'queryParameter',
bind: {
store: '{checkStatusStore}',
},
value: 0,
listConfig: {
itemTpl: [
'<div data-qtip="{text}: {tips}">{text}</div>'
]
}
},{
xtype: 'combo',
name: 'productId',
fieldLabel: '***',
reference: 'productStoreForCombo',
displayField: 'name',
valueField: 'id',
scrollable: true,
autoScroll: true,
store: productStoreForComboStore
});
//表格顶部工具栏
me.dockedItems = [];
me.dockedItems.push({
xtype: 'gridtoolbar',
dock: 'top',
searchBox: true,
searchItems:searchItems,
grid: this,
permissiveOpts: me.permissiveOpts
});
console.log("accountGrid inited");
me.callParent(arguments);
}
});AccountViewModel.js code:
Ext.define('Ims.view.ckcp.account.AccountViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.ckcpaccount',
requires: [
'Ext.data.Store',
'Ims.model.ckcp.Rate',
'Ims.model.ckcp.Account'
],
data: {
current: {
record: null,
operation: null
},
showGridCollapseBtn: false,
showGridExpandBtn: false
},
formulas: {
accountStatus: {
bind: {
bindTo: '{current.record}',
deep: true //current.record的所有变动都会通知到menuStatus
},
get: function(record) {
var status = {
dirty: record ? record.dirty : true,
valid: record ? record.isValid() : false
};
status.validAndDirty = status.dirty && status.valid;
return status;
}
},
selectionText: {
bind: {
bindTo: '{current.record}',
deep: true
},
get: function(record) {
var title = '';
if (record) {
var path = record.data.customerName; //title 使用用户名称
title = ' 〖<em> ' + path + ' </em>〗';
}
return title;
}
},
windowOptions: {
bind: {
bindTo: '{current.operation:lowercase}',
deep: true
},
get: function(operation) {
var options = {
title: operation == 'add' ? '登记' : (operation == 'readd' ? '补登记':(operation == 'edit' ? '修改' : (operation == 'view' ? '查看账户' : ''))),
readOnly: operation == 'view' ? true : false,
saveButtonHidden: operation == 'view' ? true : false,
prevAndNextButtonHidden: operation == 'add' ? true : false
};
return options;
}
},
registeDate:{
bind:{
bindTo: '{current.operation:lowercase}',
deep: true
},
get: function (operation) {
return operation == 'readd'? null:new Date(new Date().setDate(new Date().getDate()+Ims.Config.ckcpAccountRegisterDelayDays));
}
},
currentMenu: {
bind: '{accountgrid.selection}',
get: function(account) {
this.set('current.record', account);
return account;
}
},
stores: {
organizationStore: {
type: 'tree',
model: 'Ims.model.sys.Organization',
pageSize: 0,
autoLoad: false,
remoteFilter: true,
remoteSort: true,
root: {
id: 0,
text: '最高机构',
expanded: true
}
},
checkStatusStore:{
storeId: 'checkStatusStore',
fields: ['text','id'],
data:[
['正常',0],
['已销户',1]
]
},
accountStore: {
storeId: 'accountStore', //如果store被Controller实例化，storeID会被该store的名称覆盖
pageSize: 20,
model: 'Ims.model.ckcp.Account',
autoLoad: true,
remoteFilter: true,
remoteSort: true,
listeners: {
beforeload: 'onAccountStoreBeforeLoad'
}
},
productStore:{
storeId: 'productStore',
type: 'tree',
model: 'Ims.model.ckcp.Product',
autoLoad: false,
remoteFilter: false,
remoteSort: true,
root: {
id: 0,
name: '存款产品',
expanded: true //设置为ture则无论autoload的值为多少都会autoload
},
listeners:{
load:'onProductStoreLoaded'
}
},
productStoreForCombo:{
storeId: 'productStoreForCombo',
model: 'Ims.model.ckcp.Product',
proxy: {
type: 'ajax',
url: '/ims/ckcp/product/getforcombo',
reader: {
type: 'json',
rootProperty: 'data'
}
},
remoteFilter: false,
pageSize: 0,
autoLoad: false
}
}
});Child components can customize their own ViewModel, and then define their own store in the viewModel. If you want to use the store in the ViewModel of the parent component, there are two ways:
(1) By binding, this is a simple way:
bind{
store: '{productStoreForCombo}'
}As long as the productStoreForCombo is defined in the viewModel of the parent component.
Take a look at an example from the official documentation:
Ext.create('Ext.panel.Panel', {
title: 'Simple Form',
viewModel: {
type: 'test'
},
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
bind: '{firstName}' // uses "test" ViewModel from parent
},{
fieldLabel: 'Last Name',
bind: '{lastName}'
}]
});
// 绑定最有用的部分之一就是容器有的数据，子组件都可以获取。上面的例子，你可以看到，viewmodel的子组件绑定了父容器的数据。(2) Through component search, directly assign store to component
var viewModel = me.up('ckcpaccount').getViewModel();
var productStoreForComboStore = viewModel.getStore('productStoreForCombo');
store: productStoreForComboStoreHowever, this method should pay attention to the following problems:
parent-child relationship: store->combo->AccountGrid->Account
Because AccountViewModel is the ViewModel of Account, the top-level component Account must be found first when the component is searched, and then the AccountViewModel can be obtained through getViewModel, and then The Store in the parent component can be obtained through the ViewModel's getStore. You cannot get AccountViewModel directly through combo's getViewModel. (Remember that the official documentation seems to mention that child components can inherit the ViewModel of the parent component, so there is no need to create your own ViewModel)