如何根据我在extjs中选择的文件设置窗口的标题

Question

I have a scroll menu contain files names. When I click on a file name in the menu, I want to create a window has the file name as a title.

In the code below I can create the window but without a title.

The problem is in the line ( title: jsonobj[ii], // I got undefined here ).

var scrollMenu = Ext.create('Ext.menu.Menu');
var files = Ext.Ajax.request({
  url: 'php/getfiles.php',
  success: function(response, opts) {
    var jsonobj = Ext.decode(response.responseText);
    for(var ii = 0; ii < jsonobj.length; ii++){
      scrollMenu.add({
        text: jsonobj[ii], // working good
        handler: function () {
          var winfile = Ext.create('widget.window', {
            region: 'center',
            height: 500,
            width: 900,
            x: 500,
            y: 100,
            title: jsonobj[ii], // not working
            closable: true,
            plain: true,
            layout: 'fit',
            preventBodyReset: true,
          });
          winfile.show();
        }
      });
    }
  },
  failure: function(response, opts) {
    console.log('somthing went wrong with this AJAX call' + response.status);
  }
});

Answer 1

The problem is that all handler callbacks are defined in the same closure. That means that once ii is changed in scope of success callback - it automatically affects all handler callbacks. Since jsonobj[jsonobj.length] === undefined you always get undefined title. You should wrap handler with some other closure like below:

handler: (function(){
    var title = jsonobj[ii];
    return function () {
        var winfile = Ext.create('widget.window', {
            region: 'center',
            height: 500,
            width: 900,
            x: 500,
            y: 100,
            title: title,
            closable: true,
            plain: true,
            layout: 'fit',
            preventBodyReset: true
        });
        winfile.show();
    }
}())