PDA

View Full Version : Style config object: can you specify webkit css?



maddhippy
7 Oct 2011, 6:16 AM
Hi, I'm trying to create a plugin and it would be great if I could style completely in the plugin object's style config instead of needing external css.

Some of the attributes are fine like so:

this.box=new Ext.Container({ modal: true,
floating: true,
hideOnMaskTap: false,
width: 200,
padding: 15,
cls: 'installme-bubble horizontal-box',
html: html,
style:{
top: 'auto',
bottom: '20px',
left: Ext.Element.getViewportWidth()/2-100+'px',
border: '2px solid #EFF5FB',
zIndex: '7',
position: 'absolute',
display: '-webkit-box'
}
});
but I'm curious if there is any way to specify something like -webkit-box-shadow, -webkit-border-radius, or anything '-webkit-*' for that matter.

Has anyone out there already done this?

parth.suthar
7 Oct 2011, 7:08 AM
this.box=new Ext.Container({ modal: true, floating: true, hideOnMaskTap: false, width: 200, padding: 15, cls: 'installme-bubble horizontal-box', html: html, style:{ top: 'auto', bottom: '20px', left: Ext.Element.getViewportWidth()/2-100+'px', border: '2px solid #EFF5FB', zIndex: '7', position: 'absolute', display: '-webkit-box' }, cls:'yourclass' });In yourclass you can specify any css property. This type of pattern is used by sencha touch api. e.g. x-button class is used for stying button.

parth.suthar
7 Oct 2011, 7:11 AM
this.box=new Ext.Container({ modal: true,
floating: true,
hideOnMaskTap: false,
width: 200,
padding: 15,
cls: 'installme-bubble horizontal-box',
html: html,
style:{
top: 'auto',
bottom: '20px',
left: Ext.Element.getViewportWidth()/2-100+'px',
border: '2px solid #EFF5FB',
zIndex: '7',
position: 'absolute',
display: '-webkit-box'
},
cls:'yourclass'
});

in yourclass you can specify any csss property. This pattern has been sench touch api.