extjs承袭panel实现图片分组功能

extjs继承panel实现图片分组功能
Ext.onReady(function() {
ImgGroup = Ext.extend(Ext.Panel, {
     height: 740,
     img_view_id:''+ 'img',
     che_id: '',
     selected_urls: [],
     info: this.info,
       initComponent: function(){
         var cmp = this;
         this.html="";
         for(var i=0;i<this.info.length;i++) {
            this.html+='&nbsp;<img id=\'' + this.img_view_id + i + '\' height=200 width=200px src=\'' + this.info[i].src + '\' >' +
            '<input id=\''+ i +'\' type="checkbox" />';
         }
         ImgGroup.superclass.initComponent.call(this);
      },
      afterRender: function() {
        ImgGroup.superclass.afterRender.call(this);
        var cmp=this;
        for(var j=0;j<this.info.length;j++)
        {
             Ext.get(this.img_view_id+j).parent = this;
            
               Ext.get(cmp.img_view_id+j).on({
                 'click': {fn: function(){
                     for(var i=0;i<cmp.info.length;i++)
                     {
                       if(this.id==cmp.img_view_id+i)
                       {
                            var urlt=cmp.info[i].src;
                            var win=new Ext.Window({
                              e:'window-win',
                              width:  600,
                              height: 700,
                              closeAction: 'hide',
                              closable: true,
                              draggable: true,
                              constrain: true,
                              constrainHeader: true,
                              modal: true,
                              html: '<img id=1 src=\'' + urlt + '\'>'
                            });
                            win.show();
                            return;
                       }
                    }
                 }}
              });
               Ext.get(cmp.che_id+j).on({
               'click': {fn: function(){
                    if(cmp.selected_urls.length==0)
                     {
                       cmp.selected_urls.push(cmp.info[this.id]);
                       this.previousSibling.style.cssText='padding:3px 3px 3px 3px;background:red';
                     }
                     else
                     {
                        for(var i=0;i<cmp.selected_urls.length;i++)
                        {
                            if(cmp.info[this.id].src==cmp.selected_urls[i].src)
                            {
                               cmp.selected_urls.splice(i,1);
                               this.previousSibling.style.cssText="";
                               return;
                            }
                         }
                         cmp.selected_urls.push(cmp.info[this.id]);
                         this.previousSibling.style.cssText='padding:3px 3px 3px 3px;background:red';
                     }
               }}
              });
         }
      }
    });
    //var img1 = new ImgGroup({src: ['img_file/001.jpg','img_file/002.jpg','img_file/003.jpg','img_file/004.jpg',
      //'img_file/005.jpg','img_file/006.jpg','img_file/007.jpg','img_file/008.jpg','img_file/009.jpg','img_file/010.jpg'], title: '图片分组'});
    var img2=new ImgGroup({info: [{id: '1' , src: 'img_file/001.jpg'},{id: '2' , src: 'img_file/002.jpg'},{id: '3' , src: 'img_file/003.jpg'},
                           {id: '4' , src: 'img_file/004.jpg'},{id: '5' , src: 'img_file/005.jpg'}],title: '图片分组'});
    console.log(img2.selected_urls);
    var main_panel = new Ext.Panel({
        title: 'main_panel',
        el: 'main_panel',
        autoHeight: true,
        bodyBorder: false,
        collapsible: true,
        renderTo: Ext.getBody(),
        items: [img2]
    });
});