[ST2 PR3] In Ext.application, list doesn't work.

[jwjiwon]

Ext.application({
  name: 'Joy',
    
  launch: function(){
    
     var container = Ext.create('Ext.Container', {
          fullscreen: true,
          items:[
          {
                  xtype: 'toolbar',
                  dock: 'top',
                  title:  'JOY',
                  items: [{
                      xtype: 'searchfield',
                      id: 'searchTopicField',
                      placeHolder : 'Topic',
                      border: '1',
                      width: '99%',
                      margin: '5',
                 }],
                 listeners: {
                       
                    focus :  function( textField, event, options ){
                            
                       var searchList = container.getComponent('searchTopicList');
                            
                       for(var i = 2; i < this.getItems().length; i++){
                            container.getAt(i).setHidden(true);
                       }
                            
                      searchList.setHidden(false); 
                            
                  },
                 keyup : function( textField, event, options ){
                            
                   var searchList = container.getComponent('searchTopicList'),
                   textValue = textField.getValue(),
                   searchListStore = searchList.getStore();
                            
                    if(textValue.length > 0){
            
                           searchList.setHidden(false);
                            
                           var find = false, firstRecord;
                                
                          searchList.getStore().filterBy(function(record){
                             fieldData = record.data.topic.toLowerCase().indexOf(textValue);
                             if(fieldData > -1){
                                  return record;
                              }
                          }); 
                                
                       }else{
                                
                           if(searchListStore.isFiltered()){
                              searchListStore.clearFilter(); 
                           } 
                              searchList.setHidden(true);
                          }
                     }
                } 
                    
         },
         {
               xtype: 'list',
               id: 'searchTopicList',
               flex : 1,
               scrollable : true,
               grouped: true,
               selectedCls: 'x-list-footer-item',
               store: Ext.create('Ext.data.Store', {
                  fields: ['id', 'bigtopic' ,'topic'] ,
                  sorters: 'bigtopic',
                  getGroupString : function(record) {
                       return record.get('bigtopic');
                  }, 
                 data: [
                       {bigtopic: 'Agriculture', topic: 'Agriculture' },
                       {bigtopic: 'Economics', topic: 'Economics'},
                       {bigtopic: 'Education', topic: 'Education economy and society'},
                       {bigtopic: 'Education', topic: 'Higher education and adult learning'},
                       {bigtopic: 'Education', topic: 'Preschool and school'},
                       {bigtopic: 'Education', topic: 'Research and knowledge management'},
                       {bigtopic: 'Employment', topic: 'Employment'},
                       {bigtopic: 'Science', topic: 'Science'}
                   ]
                 
               }),
               itemTpl: "<div class='joy_list'>{topic}</div>"
          }
         ]
    });
        
    }
});

In the Ext.application, The list doesn't work.
I used Google chrome 16, and also PR3 example getting_started doesn't work when it comes to blog
which is also list.
I guess something wrong with the store.

[mitchellsimoens]

This has nothing to do with Ext.application and in fact is not a bug at all. The list is rendered but has no height because you didn't give it one and it's parent isn't managing it's height. You need to assign a layout to the Ext.Container. If you give it layout : 'fit' you will then see your list.

[jwjiwon]

Thank you,
but I don't understand, why it works when it was the same without 'fit' in the mvc version.
some times it works, and other times, it doesn't work.
Maybe I miss something important..
can you explain me about this, please?

[mitchellsimoens]

Everything did work, just your list had a height of zero pixels so it didn't appear to work. Using layout 'fit' means that the Container will take one item and make it have 100% of it's height and width so therefor your list now is told to have a height.

[jwjiwon]

Now I got understood.
Thank you for explanation