Advanced templates
-
Upload
sencha -
Category
Technology
-
view
1.063 -
download
0
description
Transcript of Advanced templates
![Page 1: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/1.jpg)
![Page 2: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/2.jpg)
Advanced Templatesfor Ext JS
James Brantly @jbrantly
![Page 3: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/3.jpg)
Overview
![Page 4: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/4.jpg)
Overview
Member FunctionsSubtemplates
Recursive TemplatesList Layout
![Page 5: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/5.jpg)
Crash Course
![Page 6: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/6.jpg)
![Page 7: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/7.jpg)
Member Functions
![Page 8: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/8.jpg)
Member Functions• Arbitrary JavaScript functions can be defined and
executed as part of the template• Extremely useful for adding advanced functionality and
all of the techniques shown today will use them• Defined by passing a config object as last parameter and
attaching functions as properties• Three basic ways of accessing member functions from
template
![Page 9: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/9.jpg)
![Page 10: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/10.jpg)
Subtemplates
![Page 11: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/11.jpg)
Subtemplates• Templates can call other templates• Great if there is a lot of redundancy in your templates• Makes use of the “apply” method• Can optionally create a “manager” class to name and
easily access subtemplates
![Page 12: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/12.jpg)
![Page 13: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/13.jpg)
![Page 14: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/14.jpg)
Recursive Templates
![Page 15: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/15.jpg)
Recursive Templates• Uses the same methodology as subtemplates: templates can
call other templates, even themselves• Great for hierarchical/nested data
![Page 16: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/16.jpg)
![Page 17: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/17.jpg)
List Layout
![Page 18: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/18.jpg)
List Layout• Templates are often used to create lists (ex. DataView)• Typically laid out using normal flow (inline or block) or
stacked next to each other using float• It’s possible using the “xindex” variable and the modulo
operator to create wrapper elements around groups of items for more advanced layout strategies
![Page 19: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/19.jpg)
![Page 20: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/20.jpg)
![Page 21: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/21.jpg)
Example App
![Page 22: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/22.jpg)
Questions?
![Page 23: Advanced templates](https://reader034.fdocuments.us/reader034/viewer/2022051314/54bd87524a795932488b456d/html5/thumbnails/23.jpg)
http://www.sencha.com/deploy/dev/docs/see the Ext.XTemplate constructor
http://www.github.com/jbrantly/advtemplates
Questions?