ExtJs之Ext.view.View
生活随笔
收集整理的這篇文章主要介紹了
ExtJs之Ext.view.View
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
要注意MODEL的定義和實例化的代碼，注釋掉的是老式的不兼容4.0以上的。而下面的定義才是新推薦的。
我網(wǎng)上可是查的了。是書上的代碼老了。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | <!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: '產(chǎn)品名稱', ????????????name: 'productName' ??????????},{ ????????????fieldLabel: '數(shù)量', ????????????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>產(chǎn)品名稱</td><td width=75>數(shù)量</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: '產(chǎn)品錄入', ??????????items: [inputForm, productViewPanel] ????????}); ??????}); ????</script> </head> <body> <div id='tpl-table1'></div> <br> <div id='tpl-table2'></div> </body> </html> |
?
總結(jié)
以上是生活随笔為你收集整理的ExtJs之Ext.view.View的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 夸克app怎么用(夸克官方新版本)
- 下一篇： 王者荣耀进度条速度如何加快