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 ...
随机推荐
- luogu2770 航空路线问题 网络流
题目大意: 给定一张航空图,图中顶点代表城市,边代表 2 城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线.(1)从最西端城市出发,单向从西向东途经若干城市到达最东端城市,然 ...
- C++虚函数默认实参的注意事项
我们都知道当成员函数是虚函数的时候,函数调用取决于调用函数的对象的类型而不是指针或者应用的类型.这就是C++中的多态. 那么一个虚函数的实参的缺省值是什么呢?例如如下代码: #include < ...
- 复习HTML+CSS（8）
n 普通框架 框架技术:将一个浏览器划分成若干个小窗口,每个小窗口显示一个独立的网页. 框架集合框架页 u 框架集<frameset>:主要用来划分窗口的. u 框架页<fra ...
- Caffe2：使用Caffe构建LSTM网络
前言: 一般所称的LSTM网络全叫全了应该是使用LSTM单元的RNN网络. 原文:(Caffe)LSTM层分析 入门篇:理解LSTM网络 LSTM的官方简介: http://deeplearning. ...
- SiftGPU：编译SiftGPU出现问题-无法解析的外部符号 glutInit
OpenCV出现了ORB特征和SURF的GPU版本, 参考:opencv上gpu版surf特征点与orb特征点提取及匹配实例至于使用什么并行API暂时没有探究. 但没有发现OpenCV-SIFT的GP ...
- Matlab/Eigen矩阵填充问题
Matlab进行矩阵填充时可以填充空矩阵,相当于空矩阵不存在,例如一下代码: P_RES = [ P_xv P_xvy P_xv*dy_dxv'; P_yxv P_y P_yxv*dy_dxv'; d ...
- Spring+SprinMVC配置学习总结
一千个人有一千种spring的配置方式,真是这样.看了好多的配置,试验了很多.这里做一个总结. 1 原理上,spring和springmvc可以合并为一个配置文件然后在web.xml中加载,因为最终的 ...
- PAT_A1150#Travelling Salesman Problem
Source: PAT A1150 Travelling Salesman Problem (25 分) Description: The "travelling salesman prob ...
- eas左树右表基础资料界面引用为左树右表F7的简单方法
age: /** * 加载配件F7(左树右表) * @param F7Filed 要加载的F7控件 * @param ctx 界面上下文 * @单据 ...
- 【剑指Offer】18、二叉树的镜像
题目描述: 操作给定的二叉树,将其变换为原二叉树的镜像. 解题思路: 求一棵树的镜像的过程:先前序遍历这棵树的每个结点,如果遍历到的结点有子结点,就交换它的两个子结点.当交换完所有的非 ...