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
>
        
      