ExtJs之Ext.view.View
2024-08-25 22:16:05
要注意MODEL的定义和实例化的代码,注释掉的是老式的不兼容4.0以上的。而下面的定义才是新推荐的。
我网上可是查的了。是书上的代码老了。
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"> <script type="text/javascript" src="ExtJs/ext-all.js"></script> <script type="text/javascript" src="ExtJs/bootstrap.js"></script> <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var inputForm = Ext.create('Ext.form.Panel', { bodyPadding: 5, width: 600, flex: 1, fieldDefaults: { labelSeparator: ': ', labelWidth: 80, width: 180, msgTarget: 'side', allowBlank: false, labelAlign: 'right' }, layout: { type: 'hbox', align: 'middle' }, defaultType: 'textfield', items: [{ fieldLabel: '产品名称', name: 'productName' },{ fieldLabel: '数量', xtype: 'numberfield', name: 'productNum' },{ fieldLabel: '金额', xtype: 'numberfield', name: 'productPrice' }], fbar: [{ text: '增加', handler: function(){ if(inputForm.getForm().isValid()){ var data = inputForm.getForm().getValues(); //var product = Ext.ModelMgr.create(data, 'ProductInfo'); var product = Ext.create('ProductInfo', data); productStore.add(product); inputForm.getForm().reset(); } } }] }); //Ext.regModel('ProductInfo', { // fields: ['productName', 'productNum', 'productPrice'] //}); Ext.define('ProductInfo', { extend: 'Ext.data.Model', fields: [ {name: 'productName'}, {name: 'productNum'}, {name: 'productPrice'} ] }); var productStore = Ext.create('Ext.data.Store', { autoLoad: true, data: [], model: 'ProductInfo', proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'datas' } } }); var productTpl = new Ext.XTemplate( '<table border=1 cellspacing=1 cellpadding=1 width=100%>', '<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>', '<tpl for=".">', '<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>', '</tpl>', '</table>' ); var productView = Ext.create('Ext.view.View', { store: productStore, tpl: productTpl, deferEmptyText: false, itemSelector: 'div.thumb-wrap', emptyText: '请录入商品' }); var productViewPanel = Ext.create('Ext.panel.Panel', { autoScroll: true, width: 600, flex: 3, layout: 'fit', bodyStyle: 'background-color: #FE5623', items: productView }); Ext.create('Ext.panel.Panel', { renderTo: document.body, frame: true, width: 800, height:500, layout: 'vbox', title: '产品录入', items: [inputForm, productViewPanel] }); }); </script> </head> <body> <div id='tpl-table1'></div> <br> <div id='tpl-table2'></div> </body> </html>
最新文章
- Count Complete Tree Nodes || LeetCode
- const char * char * const
- 关于只针对ie7浏览器的css问题
- 夺命雷公狗---Thinkphp----13之前台的头尾分离和导航分离
- nopCommerce 数据库初试化及数据操作
- FFmpeg 2.0编译配置
- Yii Listview 更新及搜索
- 再次分享 pyspider 爬虫框架 - V2EX
- WPF MediaElement播放器2
- Linux安装配置VPN服务器
- 计蒜客:百度的科学计算器(简单)【python神解】
- viewpager循环滚动和自动轮播的问题
- Spring+Redis的部署与Redis缓存使用示例
- 初学Python(二)
- nginx的https和http共存反向代理配置
- Centos7 下coreseek的安装
- java.lang.IllegalArgumentException: No Retrofit annotation found. (parameter #1) for method ApiService.getMethod
- tensorflow 在同一个GPU同时加载多张相同的图
- 【maven】在IDEA上 使用maven进行打包时报错:Failed to execute goal org.apache.maven.plugins:maven-javadoc-plugin:2.10.3:jar
- 使用log4net做应用程序全局日志记录保存在数据库中