PDA

View Full Version : How to Overwrite style on a 'dataview' in a 'toolbar'



mice-pace
13 May 2013, 10:43 PM
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?

mitchellsimoens
15 May 2013, 12:55 PM
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:


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.

mice-pace
20 May 2013, 3:36 PM
Not the data-view.html example... an Ext.view.View (xtype: dataview)

Here's a screenshot with the style inspector open:
43889

And the class definition:

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:

{
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) {
...
}