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的更多相关文章
- [转载]ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的 Ext GridPanel的前身,不过现在的Ext4已经将它整合 ...
- ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的Ext GridPanel的前身,不过现在的Ext4已经将它整合到 ...
- ExtJS学习-----------Ext.Array,ExtJS对javascript中的Array的扩展
关于ExtJS对javascript中的Array的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 因为 ...
- ExtJS学习-----------Ext.Object,ExtJS对javascript中的Object的扩展
关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...
- Android 拖动View View跟随手指一动
/** * 拖动View 配合onTouchListener使用 * 设置View的布局属性,使得view随着手指移动 注意:view所在的布局必须使用RelativeLayout 而且不得设置居中等 ...
- 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 ...
- ListView onItemClick(AdapterView<?> parent, View view, int position, long id)参数详解
public void onItemClick(AdapterView<?> parent, View view, int position, long id) { parent.getA ...
- Android API之android.view.View.MeasureSpec
android.view.View.MeasureSpec MeasureSpec是View的内部类 public static class MeasureSpec MeasureSpec封装从par ...
- onItemClick(AdapterView<?> parent, View view, int position, long id)
Public Methods public abstract void onItemClick (AdapterView<?> parent, View view, int positio ...
随机推荐
- B1208 [HNOI2004]宠物收养所 平衡树||set (滑稽)
这个题是一道splay裸题,但是我不太会写,所以用set直接水过去!!!哈哈哈哈,美滋滋. set总结: set是一个集合,然后里面没用重复的元素.里面有一些函数: begin() ,返回se ...
- 【转】iPhone获取状态栏和导航栏尺寸(宽度和高度)
原文网址:http://blog.csdn.net/chadeltu/article/details/42708605 iPhone开发当中,有时需要获取状态栏和导航栏高度.宽度信息,方便布局其他控件 ...
- 杂项-Company:ShineYoo
ylbtech-杂项-Company:ShineYoo 1. 网站返回顶部 1. 2. 3. 4. 2. 网站测试返回顶部 1. 2. 3.家服宝返回顶部 0.首页 http://www.jiafb. ...
- C++ this指针 全部
在每一个成员函数中都包含一个特殊的指针,这个指针的名字是固定的.叫做this.它是指向本类对象的指针,它的值是当前被调用的成员函数所在的对象的起 始地址.例如:当调用成员函数a.volume ...
- 胜利大逃亡(续)(bfs)
http://acm.hdu.edu.cn/showproblem.php?pid=1429 #include <stdio.h> #include <queue> #incl ...
- 基于CGAL的Delaunay三角网应用
目录 1. 背景 1.1 CGAL 1.2 cgal-bindings(Python包) 1.3 vtk-python 1.4 PyQt5 2. 功能设计 2.1 基本目标 2.2 待实现目标 3. ...
- A - Beautiful Matrix
Problem description You've got a 5 × 5 matrix, consisting of 24 zeroes and a single number one. Let' ...
- Spring Boot (1) 构建第一个Spring Boot工程
Spring boot简介 spring boot是spring官方推出的一个全新框架,其设计目的是用来简化新spring应用的初始搭建以及开发过程. Spring boot特点 1.化繁为简,简化配 ...
- 解决emlog默认导航不能修改的问题以及修改后台登录地址的方法
修改默认导航 我们需要使用修改代码的方式来解决 首先找到admin/navbar.php文件 然后找到需要删除的几行代码: if ($type != Navi_Model::navitype_cust ...
- 《计算机图形学基础(OpenGL版)》使用院校(更新)
从清华大学出版社责任编辑处获悉,很多高等院校选用了我们这本教材,读者反应不错! 另外,编辑提供了一份详细的使用院校名单如下: 河南科技学院 中原工学院 河北工程大学 防空兵学院 伊犁师院电信学院 吉林 ...