1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default Unanswered: How to Overwrite style on a 'dataview' in a 'toolbar'

    Unanswered: How to Overwrite style on a 'dataview' in a 'toolbar'


    I have a custom visual component (Ext.view.View with a TPL) which is being added into a toolbar... But ExtJs is forcing it down so it is only half visible.

    On the browser, if I inspect the containing element, the div ExtJs puts the generated HTML into has an inline style of "top: 11px", forcing it 11 down from the top of it's container... considering the toolbar has "height:22 px" i think the problem is obvious

    So my question is this... how do i overwrite the 'top' style of the container? i would have thought the obvious choice was the 'style' config on the dataview, but that doesn't appear to have done anything, even if i use '!important'... Any ideas anyone?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,203
    Answers
    3515
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can I see a test case? It shouldn't have a top of 11 unless you are changing some layout config or setting a config. Here is an edit to the data-view.html example that comes with the framework but changed to show within a toolbar:

    Code:
    Ext.define('Image', {
        extend : 'Ext.data.Model',
        fields : [
            { name : 'src', type : 'string' },
            { name : 'caption', type : 'string' }
        ]
    });
    
    Ext.create('Ext.data.Store', {
        id    : 'imagesStore',
        model : 'Image',
        data  : [
            { src : 'http://www.sencha.com/img/20110215-feat-drawing.png', caption : 'Drawing & Charts' },
            { src : 'http://www.sencha.com/img/20110215-feat-data.png', caption : 'Advanced Data' },
            { src : 'http://www.sencha.com/img/20110215-feat-html5.png', caption : 'Overhauled Theme' },
            { src : 'http://www.sencha.com/img/20110215-feat-perf.png', caption : 'Performance Tuned' }
        ]
    });
    
    var imageTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap">{caption}</div>',
        '</tpl>'
    );
    
    var view = Ext.create('Ext.view.View', {
        store        : Ext.data.StoreManager.lookup('imagesStore'),
        tpl          : imageTpl,
        itemSelector : 'div.thumb-wrap',
        emptyText    : 'No images available'
    });
    
    new Ext.panel.Panel({
        renderTo : document.body,
        dockedItems : [
            {
                xtype : 'toolbar',
                dock  : 'top',
                items : [
                    view
                ]
            }
        ]
    });
    inspecting the DOM it has top : 0px which that value comes from the layout.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default


    Not the data-view.html example... an Ext.view.View (xtype: dataview)

    Here's a screenshot with the style inspector open:
    recent-example.jpg

    And the class definition:
    Code:
    Ext.define('MyApp.view.RecentJobList', {
        extend: 'Ext.view.View',
        alias: 'widget.recent',
    
        autoRender: true,
        id: 'recentjobs',
        width: 300,
        itemSelector: 'span.job',
        store: 'recentjobs2',
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                style: {
                    top: '3px !important'
                },
                tpl: [
                    '<table style="height:100%;">',
                    '<tr><td style="vertical-align:middle;">Recent Jobs: ',
                    '<tpl for="."><span class="job">{[xindex !== 1 ? ", " : ""]}',
                    '<span onclick="Ext.getCmp(\'recentjobs\').openJob({jobno});">{jobno}</span>',
                    '</tpl></td></tr>',
                    '</table>'
                ],
                listeners: {
                    beforerender: {
                        fn: me.onRecentjobsBeforeRender,
                        single: true,
                        scope: me
                    }
                }
            });
    
            me.callParent(arguments);
        },
    
        onRecentjobsBeforeRender: function(component, eOpts) {
            /*var component = Ext.getCmp('recentjobs');
            component.renew(component);*/
        },
    
        openJob: function(jobno) {
                ...
            };
    
    
            url = 'data/changeUser.php';
            id = encodeURIComponent(window.userid); 
            var newVal = window.recent; 
            var value = JSON.stringify(newVal);
    
            xmlhttp.open("POST",url,true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.setRequestHeader("X-Requested-With","XMLHttpRequest");
            xmlhttp.send("name=recent&value="+value+"&Id="+id+"&decode=true&action=edit%20user");
    
        },
    
        renew: function(component) {
            ...
        }
    
    });
    And the excerpt where i generate the toolbar and add the View:
    Code:
    {
                        xtype: 'panel',
                        region: 'north',
                        height: 60,
                        id: 'toolbarsection',
                        header: false,
                        headerPosition: 'bottom',
                        listeners: {
                            beforerender: {
                                fn: me.onPanelBeforeRender,
                                scope: me
                            }
                        },
                        items: [
                            {
                                xtype: 'textfield',
                                hidden: true,
                                id: 'user_logged',
                                fieldLabel: 'Label',
                                value: '1',
                                inputId: 'user_logged_elem',
                                listeners: {
                                    afterrender: {
                                        fn: me.onUser_loggedAfterRender,
                                        scope: me
                                    }
                                }
                            }
                        ]
                    }
    
    onPanelBeforeRender: function(component, eOpts) {
    
    
                var tb = Ext.create('Ext.toolbar.Toolbar');
                tb.suspendLayout = true;
                //tb.render('toolbar');
    
                var tb2 = Ext.create('Ext.toolbar.Toolbar');
                tb2.suspendLayout = true;
                //tb2.render('toolbar2');
    
                ...
    
    
                tb2.add({ xtype: 'tbfill' });
                tb2.add({ xtype: 'recent', style: 'top: 3px;'});
                tb2.add('-');
                tb2.add({ xtype: 'trafficlights'});
    
                tb2.doLayout();
                tb.doLayout();
    
                Ext.getCmp('toolbarsection').add(tb);
                Ext.getCmp('toolbarsection').add(tb2);
            }
        },
    
        onUser_loggedAfterRender: function(component, eOpts) {
          ...
    }