Javascript – extjs layout scroll inside vbox

extjsextjs5javascriptlayoutsencha-touch

I have a problem with adding scrollbar to grid, that is inside of vbox container.
I can not assign height directly, because I do not know it. In that vbox container also is 'another content' with undefined height, so I can not use neither 'height', neither 'flex'. I need to make grid fill all remaining space in the page, and if there will be more rows than it could fit – i need to add scrollbar to that grid.
This is most important part of code:

{
layout: {
    type: 'vbox',
    align: 'stretch'
}, 
items:[
    {
        title: 'center'
    },{
        html: 'another content'
    },{
        xtype: 'grid',
        autoScroll: true, // <-- this is not working
        columns: [
            { text: 'User', dataIndex: 'userId' }
        ],
        store: new Ext.data.Store({
            model: 'Ext.data.Record',
            fields: [
                { name: 'userId', type: 'string' }
            ],
            data: ( function(){
                var res = []
                for(var i=0; i<1000; i++){
                    res.push({ userId: 'User'+i});
                }
                return res;
            })()
        })

    }
]
}

I tryed a lot of variants, but no success.
I also prepere some fiddles for most logical solutions(but scroll is not working there anyway):
https://fiddle.sencha.com/#fiddle/fmo
https://fiddle.sencha.com/#fiddle/fmp

Any help will be good.

Best Answer

Just remove autoScroll: true and replace it with flex: 1.

https://fiddle.sencha.com/#fiddle/fms

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.container.Viewport', {          
            renderTo: Ext.getBody(),
            layout: {
                        type: 'border'
            },
            items: [
                {
                    width: '100%',
                    region: 'north',
                    items: [{
                        title: 'north'
                    },{
                        html: 'another content'
                    }]
                }, 
                {
                    region: 'center',
                    layout: 'fit',
                    items: [{
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        }, 
                        items:[
                            {
                                title: 'center'
                            },{
                                html: 'another content'
                            },{
                                xtype: 'grid',
                                flex: 1,
                                columns: [
                                    { text: 'User', dataIndex: 'userId' }
                                ],
                                store: new Ext.data.Store({
                                    model: 'Ext.data.Record',
                                    fields: [
                                        { name: 'userId', type: 'string' }
                                    ],
                                    data: ( function(){
                                        var res = []
                                        for(var i=0; i<1000; i++){
                                            res.push({ userId: 'User'+i});
                                        }
                                        return res;
                                    })()
                                })

                            }
                        ]
                    }
                    ]
                }]
        });
    }
});

ES6 solution: `let`

ECMAScript 6 (ES6) introduces new let and const keywords that are scoped differently than var-based variables. For example, in a loop with a let-based index, each iteration through the loop will have a new variable i with loop scope, so your code would work as you expect. There are many resources, but I'd recommend 2ality's block-scoping post as a great source of information.

for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value: " + i);
  };
}

Beware, though, that IE9-IE11 and Edge prior to Edge 14 support let but get the above wrong (they don't create a new i each time, so all the functions above would log 3 like they would if we used var). Edge 14 finally gets it right.

ES5.1 solution: forEach

With the relatively widespread availability of the Array.prototype.forEach function (in 2015), it's worth noting that in those situations involving iteration primarily over an array of values, .forEach() provides a clean, natural way to get a distinct closure for every iteration. That is, assuming you've got some sort of array containing values (DOM references, objects, whatever), and the problem arises of setting up callbacks specific to each element, you can do this:

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

The idea is that each invocation of the callback function used with the .forEach loop will be its own closure. The parameter passed in to that handler is the array element specific to that particular step of the iteration. If it's used in an asynchronous callback, it won't collide with any of the other callbacks established at other steps of the iteration.

If you happen to be working in jQuery, the $.each() function gives you a similar capability.

Classic solution: Closures

What you want to do is bind the variable within each function to a separate, unchanging value outside of the function:

var funcs = [];

function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}

for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

Since there is no block scope in JavaScript - only function scope - by wrapping the function creation in a new function, you ensure that the value of "i" remains as you intended.

Best Answer

Related Solutions

Javascript – Scroll to bottom of div

JavaScript closure inside loops – simple practical example

ES6 solution: let

ES5.1 solution: forEach

Classic solution: Closures

Related Topic

ES6 solution: `let`