《課模板高級(jí)用法》PPT課件.ppt

1、第十一課 模板高級(jí)用法,本課目標(biāo),Ext模板的高級(jí)用法方法：兩個(gè)具體實(shí)例,例1：自制留言板,Ext.onReady(function() var msgs= name:漠漠1,headImgSrc:img.jpg,content:大漠窮秋塞草衰，孤城落日斗兵稀。 /更多詩(shī)句留給你自己去發(fā)揮 ; var msgTpl=new Ext.XTemplate( , , , , name:, content, , , );,var win=new Ext.Window( title:留言板, width:600, height:400, autoScroll:true, items: xtype:pan

2、el, 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, directio

3、n: ASC ); store.loadData( true, false, 1, LG KS360, 54, 240 x 320 pixels, 2 Megapixel, Pink, Slider, 359, 2.400000 /這里是更多數(shù)據(jù) ),var dataview = new Ext.DataView( store: store, tpl : new Ext.XTemplate( , , , , name, price:usMoney (reviews Reviewvalues.reviews = 1 ? : s), , , ),plugins : new Ext.ux.DataV

4、iewTransition( 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( getTe

5、xt: 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: 動(dòng)態(tài)DataView, layout: fit, items : dataview, height: 400, width : 800, tbar : 過濾手機(jī)價(jià)格:, , phoneSlider ); win.show();,/根據(jù)滑動(dòng)條當(dāng)前值過濾store function filterData(slider) var values = slider.getValues(); store.filter( fn: function(record) retu