《课模板高级用法》PPT课件.ppt

第十一课 模板高级用法,本课目标,Ext模板的高级用法方法：两个具体实例,例1：自制留言板,Ext.onReady(function() var msgs= name:漠漠1,headImgSrc:img.jpg,content:大漠穷秋塞草衰，孤城落日斗兵稀。 /更多诗句留给你自己去发挥 ; var msgTpl=new Ext.XTemplate( , , , , name:, content, , , );,var win=new Ext.Window( title:留言板, width:600, height:400, autoScroll:true, items: xtype:panel, listeners: render:function() msgTpl.append(this.body,msgs); ); win.show(); );,例2：酷炫的DataView,var store = new Ext.data.ArrayStore( proxy : new Ext.data.MemoryProxy(), fields : hasEmail, hasCamera, id, name, price, screen, camera, color, type, reviews, screen-size, sortInfo: field : name, direction: ASC ); store.loadData( true, false, 1, “LG KS360“, 54, “240 x 320 pixels“, “2 Megapixel“, “Pink“, “Slider“, 359, 2.400000 /这里是更多数据 ),var dataview = new Ext.DataView( store: store, tpl : new Ext.XTemplate( , , , , name, price:usMoney (reviews Reviewvalues.reviews = 1 ? “ : “s“), , , ),plugins : new Ext.ux.DataViewTransition( duration : 550, idProperty: id ) , id: phones, itemSelector: li.phone, overClass : phone-hover, singleSelect: true, multiSelect : true, autoScroll : true );,var phoneSlider = new Ext.Slider( width : 300, minValue: 0, maxValue: 500, values : 80, 320, plugins : new Ext.slider.Tip( getText: function(thumb) var largest = Ext.max(store.collect(price, false, true); return String.format($0, thumb.value); ) , listeners: change: buffer: 70, fn : filterData );,var win=new Ext.Window( title: 动态DataView, layout: fit, items : dataview, height: 400, width : 800, tbar : 过滤手机价格:, , phoneSlider ); win.show();,/根据滑动条当前值过滤store function filterData(slider) var values = slider.getValues(); store.filter( f