ExtJs之Ext.view.View

要注意MODEL的定义和实例化的代码，注释掉的是老式的不兼容4.0以上的。而下面的定义才是新推荐的。

我网上可是查的了。是书上的代码老了。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124

<! 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 >