In my Sencha application i am showing a web page with iframe . When i scroll iframe's content it's container panel is also scrolling with it . Due to it sometimes iframe is not scrolling properly . Is there any need to changes in style/css of iframe or panel..?
Code :
Ext.define('Example.view.Dashboard', {
extend : "Ext.Panel",
alias : "widget.dashboard",
config : {
layout: 'vbox',
scrollable : false,
hideAnimation : {
type : "slideOut",
direction : 'down',
duration : 500
},
showAnimation : {
type : "slideIn",
direction : 'up',
duration : 500
},
},
initialize : function() {
this.callParent(arguments);
var cancelButton = {
ui : "normal",
handler : this.onBackButtonTap,
scope : this,
id : 'cancelDashboardButton',
itemId : 'cancelDashboardButton',
cls : 'button-left-arrow',
};
var topToolbar = {
xtype : "titlebar",
docked : "top",
cls : 'header',
name : 'detailToolbar',
title : "Dashboards",
itemId : 'dashboard-title',
items : [cancelButton]
};
var bottomToolbar = {
xtype : "toolbar",
docked : "bottom",
cls : 'footer',
};
this.add([topToolbar,
{
xtype : 'panel',
itemId:'webContainer',
flex:50,
html : '<div style="-webkit-overflow-scrolling:touch; height: 1000px; overflow: auto;"><iframe src="http://www.metacube.com/" border="0" frameborder="no" style="height:100%;width:100%;"> <iframe/></div>',
},
bottomToolbar]);
},
Maybe you can listen for a dragstart event on the nested iframe and then call the event stopPropagation method on the handler. This should prevent event to propagate to the parent container and scroll it too.
Related
Titanium Appcelerator
unable to update text inside listview code on button click below:
{
type : 'Ti.UI.View',
bindId : 'vwqtySelection',
properties : {
top : '30dp',
height : '50dp',
//backgroundColor: 'red',
width : require('main').XhdpiSupport(150),
right : '90dp',
zIndex : 10
},
childTemplates : [{
type : 'Ti.UI.Button',
bindId : 'btnMinus',
properties : {
left : '15dp',
color : '#676972',
title : '-',
width : require('main').XhdpiSupport(30),
height : require('main').XhdpiSupport(22),
}
}, {
type : 'Ti.UI.Label',
bindId : 'qtyValue',
properties : {
//touchenabled : false,
left : '50dp',
color : '#676972',
text : '4',
textAlign : 'center',
}
}, {
type : 'Ti.UI.Button',
bindId : 'btnPlus',
properties : {
left : '79dp',
color : '#676972',
title : '+',
}
}]
}
> Itemclick selection where to update text on button click
wants to update text on button click i.e. 4 to 2
below code i tried
scrlView.addEventListener('itemclick', function(e) {
if (e.bindId === 'btnMinus') {
item = section.getItemAt(e.itemIndex);
e.section.qtyValue.properties.text = "2";
e.section.updateItemAt(e.itemIndex, item);
//here not able to update text 4 to 2
} else if (e.bindId === 'btnPlus') {
}
}};
error getting below
Message: Uncaught TypeError: Cannot read property 'properties' of undefined
This is an example of how to edit a UI element in a listView.
Each ListItem contains a Label that includes a number and a plus label, when you click on the plus label, it should increment the number in that listItem.
index.xml file:
<ListView id="listView" class="listView" defaultItemTemplate="template">
<Templates>
<ItemTemplate name="template" layout='horizontal'>
<Label bindId="number" id="number" left=20>0</Label>
<Label bindId="add" id="add" right=20 onClick="addOneToCurrentNumber">+</Label>
</ItemTemplate>
</Templates>
<ListSection>
<ListItem number:text='0' />
<ListItem number:text='-50' />
<ListItem number:text='100' />
<ListItem number:text='1024' />
</ListSection>
</ListView>
index.js file:
function addOneToCurrentNumber(e) {
var row = $.listView.sections[0].getItemAt(e.itemIndex);
var number = parseInt(row.number.text);
number++;
row.number.text = number;
$.listView.sections[0].updateItemAt(e.itemIndex, row, { animated:true });
}
Hope this helps, please let me know if you needed any modifications.
I am currently implementing the same kendoui grid as showing in the following:
http://demos.kendoui.com/web/grid/index.html
The problem that i can see is that the grid does not have auto height where if the record less than 10, the grid still in the same height.
Is there anyway i could resolve this since this one not happening when we use the previous version
I tried using the following javascript but still not working:
function resizeGrid() {
var gridElement = $("#grid");
var dataArea = gridElement.find(".k-grid-content");
var newGridHeight = $(document).height() - 350;
var newDataAreaHeight = newGridHeight - 65;
dataArea.height(newDataAreaHeight);
gridElement.height(newGridHeight);
$("#grid").data("kendoGrid").refresh();
}
$(window).resize(function () {
resizeGrid();
});
Thank you
Not sure I understand your problem because the Grid actually has an autoheight. If in the definition of the Grid you define an attribute saying the number of pixel that grid should have, it will stick to that height no matter it it has 5 or 50 records. If it actually needs more space will add a scrollbar and if it need less, it will display the empty space.
In the example that you refer in your question try:
$("#grid").kendoGrid({
dataSource: {
data : createRandomData(20),
pageSize: 10
},
height : 500,
groupable : true,
sortable : true,
pageable : {
refresh : true,
pageSizes: true
},
columns : [
{ field: "FirstName", width: 90, title: "First Name" } ,
{ field: "LastName", width: 90, title: "Last Name" } ,
{ width: 100, field: "City" } ,
{ field: "Title" } ,
{ field : "BirthDate", title : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
{ width: 50, field: "Age" }
]
});
And the height will be 500px.
You can use css in order to draw a grid that will keep its height adjusted to its container, as well as considering other elements around:
#grid {
/* chop the grid's height by 45px */
height: calc(100% - 45px);
}
#grid .k-grid-content {
/* chop the grid content's height by 25px */
height: calc(100% - 25px) !important;
}
This is done without using the 'height' property in the grid's declaration (at the .js side).
Works fine for me.
Remove height: 500
$("#grid").kendoGrid({
dataSource: {
data : createRandomData(20),
pageSize: 10
},
groupable : true,
sortable : true,
pageable : {
refresh : true,
pageSizes: true
},
columns : [
{ field: "FirstName", width: 90, title: "First Name" } ,
{ field: "LastName", width: 90, title: "Last Name" } ,
{ width: 100, field: "City" } ,
{ field: "Title" } ,
{ field : "BirthDate", title : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
{ width: 50, field: "Age" }
]
});
For me, removing scrollable did the trick.
If there was only one row, the grid was small, and grew together with the amount of rows up to the pagesize level.
No height setting needed.
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.
Im writing a Sencha touch app that I want to show a popup box that has three buttons. I put a function in a controller that is supposed to display the popup, which it kind of does. My problem is that there is no background or border for the popup, so you can see right through it. Here is an example for my controller
Ext.regController('LoginController', {
'login' : function(options) {
loginPopup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width : 250,
height : 250,
layout : {
align : "center",
pack : "center"
},
styleHtmlContent : true,
items : [Button1, Button2, Button3],
dockedItems : [
{
dock : 'top',
xtype : "toolbar",
title : 'Title'
}
]
loginPopup.show('pop');
All the items and dockeditems show up, but there is no background or border.
I would have posted a pic, but im apparently not reputable
Use sencha-touch.js and sencha-touch.css from same version of Sencha Touch. js and css files are different for every version of Sencha Touch. For development, import the whole Sencha release. See this. For prod keep only files that you require.
set background color for the overlay using the style property
style: 'background-color: color_of_your_choice'
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, about]
});
For the ui, can I specify like, a color instead of dark and light? How can I make it a specific color or background image of our choice?
Thanks.
What you need to do is to define a new ui type using SASS and COMPASS.
So, you have to be familiar with these frameworks.
If you already install these, and you already know how to create you application theme CSS, then you can add the following line to your theme .sass file to define a custom ui
#include sencha-tabbar-ui('myUI', $tabs-myUI, $tabs-bar-gradient, $tabs-myUI-active);
As you can see I'm using some variables to set the wanted style.
In details:
$tabs-myUI: Is the Base color for "myUI" UI tabs.
$tabs-bar-gradient: Is The Background gradient style for tab bars.
$tabs-myUI-active: Is the Active color for "light" UI tabs.
You can define how many different UI you want and use them in your code in the following way:
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'myUI',
items: [home, about]
});
This is the official Sencha way to do it.
Hope this helps.
Give your tabPanel or its children a cls attribute. This gives the html tag a class, so you can use it for styling in your CSS.
Obviously after this, you would style it using something like:
background-image: url(...);
background-color: pink;
#AndreaCammarata
I'm able change the tabpanel Color using your above sass.
But I'm to change the active colour of the tabs.
Please find below my code
#include sencha-tabbar-ui('tabcolour', #333333,'glossy',#0088CC);
VIEW:
config : {
style: "background-color: white",
ui: 'tabcolour',
tabBar : {
ui: 'tabcolour',
layout : {
pack : 'center'
}
},
layout : {
type : 'card',
animation : {
type : 'fade'
}
},
items : [{
title : 'Descrption',
xtype : 'item_description'
},{
title : 'Photos',
xtype : 'Item_Photos',
}, {
title : 'Comments',
xtype : 'item_add_viewcomment'
}, {
title : 'Videoes',
xtype : 'item_video'
}
]
}