Change Style and width of DataItem dynamically

[StehA]

Hi,

i've got a problem concerning the dataView and dataItem components. In the below scribble, you can see my intention.

dataview.PNG


The left figure should be shown in portrait mode and the right one in landscape mode. I've manually managed it by setting

width: '50%',
style: 'float:left'

for the landscape mode.

But how to register an "orientationchange" event for the dataItem components to set them dynamically on orientation change?

[george.m]

Try something like this. You're going to have to test it as that's off the top of my head.:

// Assign the event lsitener
Ext.Viewport.on('orientationchange', function(){
      var orientation = Ext.Viewport.getOrientation(),
            dataView = Ext.ComponentQuery.query('...dataview selector...')[0];
      
      if (orientation == 'landscape'){
           dataView.setWidth('50%');
           dataView.setStyle({ 'float':'left' });
      } else {
           // The other stuff
      }
}, this);

[StehA]

Hey george,

thx for your hint. I finally got it with this code fragment:

//...
var orientation = Ext.Viewport.getOrientation(),
     dataItems = Ext.ComponentQuery.query('.hostlistitem'),
      i;

        if (orientation == 'landscape') {
            for(i=0;i<dataItems.length;i++) {
                dataItems[i].setWidth('50%');
                dataItems[i].setStyle('float:left');
            }
        } else {
            for(i=0;i<dataItems.length;i++) {
                dataItems[i].setWidth('100%');
                dataItems[i].setStyle('float:none');
            }
        }
//...