首页 > 代码库 > 跟我一起学extjs5(15--模块字段和Grid列的定义[2])
跟我一起学extjs5(15--模块字段和Grid列的定义[2])
跟我一起学extjs5(15--模块字段和Grid列的定义[2])
model和columns生成好了，下面要修改一下Module.js和Grid.js中的代码，使其能够协同工作。
/**
* 一个模块的主控界面的容器，用来安放各个模块控件以及协调他们之间的关系
*/
Ext.define('app.view.module.Module', {
extend : 'Ext.panel.Panel',
alias : 'widget.modulepanel',
requires : ['app.view.module.ModuleController',
'app.view.module.ModuleModel', 'app.view.module.factory.ModelFactory'],
uses : ['app.view.module.region.Navigate', 'app.view.module.region.Grid',
'app.view.module.region.Detail'],
controller : 'module',
// MVVM架构的控制器的名称，main控制器会自动加载，这个控制器不会自动加载，需要在requires中指定，不知道是为什么
viewModel : {
type : 'module'
},
bind : {
// glyph : '{tf_glyph}', // 这一个绑定是无效的，在tabPanel渲染过后，再修改这个值，将不会有任何效果。
title : '{tf_title}' // 这个绑定是有效的，可以根据ModuleModel中的值来设置title
},
layout : 'border', // 模块采用border布局
initComponent : function() {
this.glyph = this.getViewModel().get('tf_glyph'); // 由于上面的glyph的bind无效，因此需要在这里加入glyph的设置
this.model = app.view.module.factory.ModelFactory.getModelByModule(this
.getViewModel());
console.log(this.model);
this.store = Ext.create('Ext.data.Store', {
model : this.model,
autoLoad : true,
proxy : {
type : 'localstorage',
id : 'module' + '__' + this.getViewModel().get('tf_moduleName')
}
})
this.items = [{
xtype : 'navigate', // 导航区域
region : 'west',
width : 250,
collapsible : true,
split : true
}, {
xtype : 'modulegrid', // 模块的grid显示区域
region : 'center',
store : this.store
}, {
xtype : 'recorddetail', // 记录明细
region : 'east',
width : 250,
collapsible : true, // 可以折叠隐藏
collapseMode : 'mini', // 折叠陷藏模式
split : true
// 可以拖动大小
}]
this.callParent();
}
})在Module.js中，根据modelFactory创建model，并且创建一个Store,使用了自动生成的model，由于现在还没有和后台建立关系，因此先把数据存在本地数据中。见下面的代码，type:‘localstorage‘，就是使用本地存贮来存放数据。
this.store = Ext.create('Ext.data.Store', {
model : this.model,
autoLoad : true,
proxy : {
type : 'localstorage',
id : 'module' + '__' + this.getViewModel().get('tf_moduleName')
}
}) Grid.js中也修改：
/**
* 模块数据的主显示区域，继承自Grid
*/
Ext.define('app.view.module.region.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.modulegrid',
uses : ['app.view.module.region.GridToolbar',
'app.view.module.factory.ColumnsFactory'],
bind : {
title : '{tf_title}' // 数据绑定到ModuleModel中的tf_title
},
dockedItems : [{
xtype : 'gridtoolbar', // 按钮toolbar
dock : 'top'
}],
columnLines : true, // 加上表格线
viewConfig : {
stripeRows : true, // 奇偶行不同底色
enableTextSelection : true
},
initComponent : function() {
var viewModel = this.up('modulepanel').getViewModel();
// 创建grid列
this.columns = app.view.module.factory.ColumnsFactory.getColumns(
viewModel, 10);
this.callParent();
}
})
在Grid中加入columns 即可。经过以上步骤，可以展示界面了。
下面手动增加几条记录，给新增按钮增加一个事件执行，在GridToolbar的“新增“下面增加 handler :‘addRecord‘,
/**
* 模块的控制器
*/
Ext.define('app.view.module.ModuleController', {
extend : 'Ext.app.ViewController',
requires : ['Ext.MessageBox', 'Ext.window.Toast'],
alias : 'controller.module',
init : function() {
console.log('modulecontroller.init')
} ,
addRecord : function(){
var grid = this.getView().down('modulegrid');
var model = Ext.create(grid.getStore().model);
model.set('tf_id',1);
model.set('tf_name', '太湖花园小区建设');
model.set('tf_code','2004-01');
model.set('tf_squaremeter',12000);
model.set('tf_budget',3800000);
model.set('tf_rjl',0.67);
model.set('tf_startDate',new Date());
model.set('tf_endDate',new Date());
model.set('tf_isValid',false);
model.set('tf_m3',1239.24);
grid.getStore().add(model);
console.log(model);
grid.getStore().sync();
}
}) 点击几下“新增“按钮，点入几条记录。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。