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

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -