跟我一起学extjs5(15--模块字段和Grid列的定义[2])
来源:互联网 发布:燕窝销量数据 编辑:程序博客网 时间:2024/04/29 22:51
跟我一起学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', // 按钮toolbardock : '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();}})
点击几下“新增“按钮,点入几条记录。
7 1
- 跟我一起学extjs5(15--模块字段和Grid列的定义[2])
- 跟我一起学extjs5(14--模块字段和Grid列的定义[1])
- 跟我一起学extjs5(29--加入模块和菜单定义[2建立java bean])
- 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
- 跟我一起学extjs5(16--各种Grid列的自定义渲染)
- 跟我一起学extjs5(21--模块Grid的多列表方案)
- 跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表])
- 跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成])
- 跟我一起学extjs5(32--加入模块和菜单定义[4更新菜单(源码下载)])
- 跟我一起学extjs5(11--自定义模块的设计)
- 跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)
- 跟我一起学extjs5(33--单个模块的设计[1建立表和bean])
- 跟我一起学extjs5(24--模块Form的自定义的设计[2])
- 跟我一起学extjs5(34--单个模块的设计[2建立表单表bean])
- 跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])
- 跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])
- 跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])
- 跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])
- [数字图像处理]常见噪声的分类与Matlab实现
- 发布网站,让外网访问
- shell-break
- 索引监控慢的问题
- R语言中碰到的问题
- 跟我一起学extjs5(15--模块字段和Grid列的定义[2])
- 待字闺中之单链表和之恋
- Android NFC Reference中英文
- C/C++指针总结
- 无锁队列的实现
- java操作Redies
- GMM-HMM语音识别模型 原理篇
- 精通23种设计模式综合实例
- [Java]查看JVM的状态