PDA

View Full Version : how to create custom UI using Sencha Touch



ibaozi
14 Mar 2011, 6:21 AM
i want to create a simple UI structure just like this:


<div class="flowBox">
<div class="ContentFlow ContentFlowAddOn_carousel">
<div class="flow showCaption">
<div class="item">
<img class="content landscape" src="imgs/1a.png">
<div class="caption">Dancing in the Rain<br></div>
</div>
</div>
</div>


Anyone have idea how to simply create above code BUT WITHOUT sencha touch auto-created class attributs " something like class = "x-panel myClsName x-fullscreen x-landscape".
p.s. I am using a 3-party code to integrate or reimplement a "content-flow" effect into a Sencha Touch app.

thx a lot, Danke Schöne! :)

crysfel
14 Mar 2011, 5:13 PM
You can add a template to a panel:



new Ext.Panel({
fullscreen: true,
tpl : new Ext.XTemplate(
'<div class="flowBox">',
'<div class="ContentFlow ContentFlowAddOn_carousel">',
'<div class="flow showCaption">',
'<div class="item">',
'<img class="content landscape" src="imgs/1a.png">',
'<div class="caption">Dancing in the Rain<br></div>',
'</div>',
'</div>'
})
);


Best regards

sarajay
8 Aug 2011, 2:25 AM
Hi Danke,

Can you share what is the third party you are using to create that effect

tnx in advance,
JP