javascript - solve responsive icon menu in extjs sencha -
if want config responsive icon menu in this:.
how can make mobile apps responsive apps accessible on screens of different dimensions? how should config responsive icon fix device small or big ,
i have :
subcarouselmenuitemmainboard:function(langid, menutypeclass, handler, reftitle,ref){ var menuitem = { layout: 'hbox', ui: 'round', cls:'btnborderstyle btnstylemarketing' , html: [ '<table class="centeralig">', '<div class="imagesizem '+ menutypeclass +'" style="clear: both;"></div>', '<tr><td class="btnmenutextm">', app.security.globalfunc.embedtext('s',langid), '</td></tr>', '</table>' ].join(''), reftitle: ''+ reftitle +'', handler: ''+ handler +'', namebtn: ''+ ref + '' }; return menuitem; }
this component looks mixup of html , extjs component, should using extjs components only, using tables or kind of div custom css break pros of using framework, example, there several ways profiles: , second responsiveconfig.
using responsiveconfig: need add property , add different settings each case:
var menuitem = { layout: 'hbox', // ... cutted ... // add plugin , configuration plugins: 'responsive', responsiveconfig: { landscape: { reftitle: ' in landscape '+ reftitle , // recommend use extjs components not html html: ' landscape html' }, portrait: { reftitle: ' in portrait '+ reftitle , // again, recommend use extjs components not html html: ' portrait html' }, // specific examples: -- not use of // same time, pick best solution suits you. 'iphone': { // case html: ' iphone html markup only' }, // or phone tag 'phone': { html: ' phone' }, // or width, can resize window 'width < 320': { html: ' small screen' } }, responsive config api modern toolkit: api , give try, there several examples.
Comments
Post a Comment