ExtJs之Ext.view.View

要注意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>
　　 ExtJs之Ext.view.View
秒客网

ExtJs之Ext.view.View

相关文章
