REQUIRED INFORMATION

Ext version tested:
  • Sencha Touch. 2.1.0
Browser versions tested against:
  • Google Chrome Version 24.0.1312.52
DOCTYPE tested against:
  • html
Description:
  • When using the nested list component, if the contents of an item consists of more than a couple of lines, the nested list does not expand to fit the contents. The contents "bleeds" over the item separators.
Steps to reproduce the problem:
  • Edit the "Kitchen Sink" example code, and add a getItemTextTpl which contains some "<br>" items to make it span more than a couple of lines.
The result that was expected:
  • Expect the nested list item to expand vertically to accommodate the contents.
The result that occurs instead:
  • Past the first level of list items, the contents of the item "bleeds" outside of the nested list separator.
Test Case:


Code:
/**
 * Demonstrates a NestedList, which uses a TreeStore to drill down through hierarchical data
 */
Ext.require('Ext.data.TreeStore', function() {
    Ext.define('Kitchensink.view.NestedList', {
        requires: ['Kitchensink.view.EditorPanel', 'Kitchensink.model.Cars', 'Ext.layout.Fit'],
        extend: 'Ext.Container',
        config: {
            layout: 'fit',
            items: [{
                xtype: 'nestedlist',
                store: {
                    type: 'tree',
                    id: 'NestedListStore',
                    model: 'Kitchensink.model.Cars',
                    root: {},
                    proxy: {
                        type: 'ajax',
                        url: 'carregions.json'
                    }
                },
                //This is the line that is added.
                getItemTextTpl: function() {
                            return '{text}<br>Second test line<br>Third test line<br>Fourth test line<br>Fifth test line';
                    },
                displayField: 'text',
                listeners: {
                    leafitemtap: function(me, list, index, item) {
                        var editorPanel = Ext.getCmp('editorPanel') || new Kitchensink.view.EditorPanel();
                        editorPanel.setRecord(list.getStore().getAt(index));
                        if (!editorPanel.getParent()) {
                            Ext.Viewport.add(editorPanel);
                        }
                        editorPanel.show();
                    }
                }
            }]
        },
    });
});





HELPFUL INFORMATION

Screenshot or Video:

NestedListProblem2.png
See this URL for live test case: http://

Debugging already done:
  • Reproduced this outside of our existing code to eliminate any potential impacts of our code and stylesheet.
Possible fix:
  • not provided
Additional CSS used:
  • only default ext-all.css
Operating System:
  • Linux
  • WinXP Pro