要注意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的更多相关文章

  1. [转载]ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图

    本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的 Ext GridPanel的前身,不过现在的Ext4已经将它整合 ...

  2. ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图

    本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的Ext GridPanel的前身,不过现在的Ext4已经将它整合到 ...

  3. ExtJS学习-----------Ext.Array，ExtJS对javascript中的Array的扩展

    关于ExtJS对javascript中的Array的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 因为 ...

  4. ExtJS学习-----------Ext.Object，ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  5. Android 拖动View View跟随手指一动

    /** * 拖动View 配合onTouchListener使用 * 设置View的布局属性,使得view随着手指移动 注意:view所在的布局必须使用RelativeLayout 而且不得设置居中等 ...

  6. public void onItemClick(AdapterView arg0, View view, int position,long arg3)详解【整理自网络】

    参考自: http://blog.csdn.net/zwq1457/article/details/8282717 http://blog.iamzsx.me/show.html?id=147001 ...

  7. ListView onItemClick(AdapterView<?> parent, View view, int position, long id)参数详解

    public void onItemClick(AdapterView<?> parent, View view, int position, long id) { parent.getA ...

  8. Android API之android.view.View.MeasureSpec

    android.view.View.MeasureSpec MeasureSpec是View的内部类 public static class MeasureSpec MeasureSpec封装从par ...

  9. onItemClick(AdapterView<?> parent, View view, int position, long id)

    Public Methods public abstract void onItemClick (AdapterView<?> parent, View view, int positio ...

随机推荐

  1. [POJ 3565] Ant

    [题目链接] http://poj.org/problem?id=3565 [算法] KM算法求最小匹配 [代码] #include <algorithm> #include <bi ...

  2. B1270 [BeijingWc2008]雷涛的小猫 dp

    这个题的原始方法谁都会,但是n^3会T.之后直接优化,特别简单,就是每次处理出来每层的最大值,而不用枚举.之前没这么做是因为觉得在同一棵树的时候没有下落,所以不能用这个方法.后来想明白了,在同一棵树上 ...

  3. 89. Ext.Button 按钮

    转自:http://www.cnblogs.com/lipan/archive/2011/12/13/2274797.html 从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装.本 ...

  4. (Go)07.Go语言中strings和strconv包示例代码详解01

    1.strings使用 前缀和后缀 HasPrefix判断字符串s是否以prefix开头: 示例: package main import ( "fmt" "string ...

  5. 明解C语言

    本文为阅读书籍<明解C语言-中级篇>所积累的知识点及编译书本代码时遇到的问题.部分对应代码在\Code_2018\BK_明解C语言目录下.每个代码内都含有程序功能.思路.疑惑点等内容,如有 ...

  6. # 深入理解Redis（二）——内存管理的建议与技巧

    引语 随着使用Redis的深入,我们不可避免的需要深入了解优化Redis的内存,本章将重点讲解Redis的内存优化之道,同时推荐大家阅读memory-optimization一文. 想要高效的使用Re ...

  7. SnackDown Online Qualifier 2017

    好久没做题了,然后就想着随便做一个.无奈cf都是晚上,然后就看见这个,随便做做. 资格赛,只要做出来1题就行了,4天的时间. 1. 水题 #include <iostream> #incl ...

  8. Java中数组要点总结

    1.数组是基本数据类型和字符串类型的容器(引用数据类型),而集合是类数据类型的容器: 2.数组定义的格式: (1)一般格式: 元素类型[] 数组名 = new 元素类型[元素个数或者数组长度]: 其中 ...

  9. Windows 环境下 Docker 使用及配置

    原文引用: https://www.cnblogs.com/moashen/p/8067612.html 我们可以使用以下两种方式在Windows环境下使用docker: 1. 直接安装: Docke ...

  10. 如何通过putty软件远程登录并且控制linux平台

    准备备工作: 下载putty远程登录软件,图标如下 打开linux主机. Linux主机准备条件: 1 配置IP ,如果大家使用虚拟机的话建议通过vm1或者vm8进行与本地真实机进行连接,同时注意要避 ...