I dynamically create a bottom toolbar but it has its default height no matter the value I give to the height property. I tried the purcentage, pixels, simple numbers but nothing works.
myComponent.add({
xtype:'toolbar',
autoDestroy:true,
docked:'bottom',
bottom:0,
width:'100%',
height:'5px',
margin:'0 0 0 0',
padding:'0 0 0 0',
layout:{
pack:'middle',
align:'middle'
}
});
You must change the minHeight property.
A working Example from my Code:
Ext.define('MyApp.view.FailureBar', {
extend : 'Ext.Toolbar',
alias : 'widget.failureBar',
config : {
docked : 'bottom',
minHeight : '30px',
zIndex : 1,
cls : 'failureBar'
}
});
Related
I want to create a view for viewing a pdf from the server.I got this st2_pdf_panel after several minutes in google.I followed the demo and copy the pdf.js and PDF.js into my project.
1 But when the app runs,the paging toolbar will show first before loading the pdf file in the middle of the view and then it will dock to the bottom.
2 The pdf view does not scroll and the scale looks bad in the iphone screen,i can hardly see the words in the page.
3 How to zoom in or zoom out ?
4 Is there any substitue for this solution ?
Below is the code of the view :
Ext.define('Myapp.view.PDF',{
extend : 'Ext.Container',
requires : ['Ext.ux.panel.PDF'],
config : {
items : [
{
xtype : 'titlebar',
docked : 'top',
title : 'PDF',
items : [
{
text : 'back',
ui : 'back',
align : 'left',
listeners : {
tap : function(){
console.log('goback');
}
}
}
]
},//title bar
{
xtype : 'pdfpanel',
height : '100%',
src : 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
style : {
backgroundColor : '#333'
},
pageScale : 0.5,
pageText: 'page {0} of {1}',
}
]
}//config
});
Does anyone know how can I achieve this design using Sencha Touch 2.2.1?
I think I need two Views; A base View with the gradient and another View in another class, which contains all the view components like tabbar title, the image, text field and so on.
Does anyone have a better idea? Is it possible to do this using SASS, assigning the $page-bg-color: as linear gradient and then drawing a white rectangle inside?
You aught to be able to paste this straight into senchafiddle.com. I am by no measure a CSS expert to some of this styeling will need a closer look, but this general layout aught to work for you.
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
launch : function() {
Ext.create('Ext.Container', {
fullscreen : true,
style : 'background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);',
layout : 'fit',
items : [{
xtype : 'titlebar',
title : 'Title',
docked : 'top'
}, {
xtype : 'panel',
layout : 'fit',
margin : '0 40 0 40',
items : [{
xtype : 'textfield',
label : 'Label 1',
docked : 'top'
}, {
xtype: 'image',
src : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL66d6uPSYD6skFSjiBAodALYwTvtqipcjBc5RBsLsMd_IoM94Hg',
height : '15em',
width : '15em',
centered : true
}]
}]
});
}
});
Good luck, Brad
Trying to increase navigation bar for iPad
navgroup.height = 80;
Can any on suggest me for increasing the navigation bar for iPad.
Well, the Apple's iOS Human Interface Guidelines states "Don’t specify the height of a navigation bar programmatically,".
So you can't, this is hardcoded to be 44dip on the iPad.
However, you could just make your own navbar view, with your own custom gradient, just float it to the top of your window, this is a start, with a background gradient and custom height of 50px:
var win = Ti.UI.createWindow({
navBarHidden : true
});
var navBar = Ti.UI.createView({
top : 0,
width : Ti.UI.FILL,
height : 50, // Your custom navbar height
backgroundGradient : { // Nice linear gradient, put your own custom colors here
type : 'linear',
startPoint : {
x : 0,
y : 0
},
endPoint : {
x : 0,
y : '100%'
},
colors : [{
color : '#75060a',
offset : 0.0
}, {
color : '#cc0000',
offset : 1.0
}]
}
});
// I usually add a bottom border view, just looks better IMO
navbar.add(Ti.UI.createView({
width : Ti.UI.FILL,
height : 1,
bottom : 0,
backgroundColor : '#000000'
}))
win.add(navBar);
You may want to add custom buttons and titles to this to make it more functional but this should get you started. The nice part about this approach is you have the most control, and its completely cross platform (works on android quite nicely).
So I have the code below, and it works except the 'plain : true', which is suppose to remove the background color of the tabs. Is it because I'm not creating the object using something like this?
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
plain: true,
If I need to do it that way how do I do the Create command from within an items list?
Ext.define('My.view.TabContainer', {
extend : 'Ext.Container',
xtype : 'tabcontainer',
layout : 'border',
items : [
{
itemId : 'theRealTabContainer',
xtype : 'tabpanel',
plain : true,
region : 'center',
items : [
{
xtype : 'company'
}
,
{
xtype : 'test'
}
]
}
]
});
No, what you're doing looks fine. This looks like a bug after testing it out, but it only happens with a border layout as it's adding 'x-border-layout-ct' that is setting the background-color. The tab panel is actually doing the right thing still. You can do 2 things:
Add a class to the container (possibly an existing plain class from extjs or your own)
Set a style on the container
Ext.create('Ext.Container', {
layout: 'border',
style: 'background-color: transparent !important',
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.