Is Sencha Touch Charts 1 compatible with Sencha Touch 2?
e.g.
I was hoping that this in an html (where ../touch is the Sencha Touch 2 release):
<title>Simple Animation with Sprites</title>
<script type="text/javascript" src="../touch-charts/sencha-touch-debug.js"></script>
<script type="text/javascript" src="../touch-charts/touch-charts-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
And app.js containing:
Ext.application({
name: 'Animation',
requires: [
'Ext.draw.Component'
],
launch: function() {
var titleVisible = false;
var drawComponent = new Ext.draw.Component({
items: [{
type: 'circle',
fill: '#EECC00',
radius: 100,
x: 200,
y: 200
}]
});
Ext.Viewport.add({
xtype: 'panel',
id: 'panel-container',
fullscreen: true,
layout: fit,
items: [drawComponent]
});
drawComponent.surface.renderFrame();
}
});
might give me a circle.
Instead I get an exception on line 339 of touch-charts-debug.js indicating that Ext.util.Observable does not exist.
Does this mean that Charts 1 is not compatible with Touch 2?
Just announced:
http://notes.sencha.com/post/18941258668/sencha-touch-charts-2-beta-is-now-available-for
No, they are not compatible.
Sencha have said that a beta release of Sencha Touch 2 Charts will be available within a few weeks.
Sencha Touch 2.1 Beta is now available which supports charts
Here is the link: http://dev.sencha.com/deploy/sencha-touch-2.1.0-b2.zip
Release Notes: http://dev.sencha.com/deploy/sencha-touch-2.1.0-b2/release-notes.html
Hope it helps you
Related
My datatable code:
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#globaldatatable').DataTable({
scrollX: '100%',
deferRender: 'true',
dom: 'lBfrtip',
scroller: {
loadingIndicator: 'true'
},
buttons: [
{ extend: 'excelHtml5', className: 'excelButton' },
{ extend: 'pdfHtml5', className: 'excelButton' }
]
});
});
</script>
When I'm setting scroller to true, why the pagination and per page data selector is gone? how to enable it?
I believe using scroller plugin makes your datatable scrollable(
Features
Key features of Scroller include:
Speed! The aim of Scroller for DataTables is to make rendering large data sets fast
Full compatibility with DataTables' deferred rendering for maximum speed
Display millions of rows in a scrollable table
Integration with state saving in DataTables (scrolling position is saved)
Easy to use
) and disables pagination buttons.
this is the working example of a scroller plugin
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html
How can I keep the horizontal scroll bar from displaying?
An example of what I am attempting is at http://jsfiddle.net/fdlane/gjkGF/3/
Below is an example page of what I am attempting to do. With the width of the container div set to greater than the grid width, I was expecting that the horizontal scroll bars would not be displayed.
Using the current height of 200px and with the number of rows greater than 6, the vertical is displayed (good). However, the horizontal is then also displayed (bad).
What am I missing?
Thanks
fdl
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/resources/tundraGrid.css">
<title>Grid Scrolling</title>
</head>
<body class="tundra">
<div id="container" style="width: 350px; height: 200px">
<div id="myGrid">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"> </script>
<script>
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function () {
var myStore = new dojo.store.Memory({
data: [{ id: "RecId1", values: "fooValue1" },
{ id: "RecId2", values: "fooValue2" },
{ id: "RecId3", values: "fooValue3" },
{ id: "RecId4", values: "fooValue4" },
{ id: "RecId5", values: "fooValue5" },
{ id: "RecId6", values: "fooValue6" },
{ id: "RecId7", values: "fooValue7" },
{ id: "RecId7", values: "fooValue7"}]
});
dataStore = new dojo.data.ObjectStore({
objectStore: myStore
});
var grid = new dojox.grid.DataGrid({
store: dataStore,
structure: [{
name: "ID",
field: "id",
width: "100px"
}, {
name: "Values",
field: "values",
width: "100px"
}]
}, "myGrid");
grid.startup();
});
</script>
</body>
</html>
add this style override to your head element:
<style>
.dojoxGridScrollbox { overflow-x: hidden; }
</style>
Reason may very well be, that when the grid overflows vertically, the vertical (-y) scroller appears and consumes 30 ( or so ) pixels of width, making the grid container also overflow in horizontal orientation
You can try to make use of the grid resize function - if a borderlayout.resize fixes your issue, reason is that it recursively resizes its children (at some calculated abs value). With Grid, you'd see this flow:
resize: function(changeSize, resultSize){
// summary:
// Update the grid's rendering dimensions and resize it
// Calling sizeChange calls update() which calls _resize...so let's
// save our input values, if any, and use them there when it gets
// called. This saves us an extra call to _resize(), which can
// get kind of heavy.
// fixes #11101, should ignore resize when in autoheight mode(IE) to avoid a deadlock
// e.g when an autoheight editable grid put in dijit.form.Form or other similar containers,
// grid switch to editing mode --> grid height change --> From height change
// ---> Form call grid.resize() ---> grid height change --> deaklock
if(dojo.isIE && !changeSize && !resultSize && this._autoHeight){
return;
}
this._pendingChangeSize = changeSize;
this._pendingResultSize = resultSize;
this.sizeChange();
},
I'm new to Sencha Touch 2.
I want to create a basic example, which has a container with 3 panels inside. But it seems that only first panel shows, two remaining are hidden. What's wrong? Here's my code:
Ext.create('Ext.Container',{
fullscreen: true,
layout: 'card',
items: [
{
xtype: 'panel',
html: 'first one',
},
{
xtype: 'panel',
html: 'second one',
},
{
xtype: 'panel',
html: 'third one',
},
]
});
If it can be done, how could I set them with equal widths?
Thanks for any help.
This is exactly what card layout is designed to do in Sencha Touch 2. Only the first child component is visible, while the others are hidden. To your question:
To show all panels: change layout config to hbox. Those 3 child panels will be arranged horizontally. Additionally, if you want them to be vertically set, use vbox
To set their relative width, use flex config. You should add flex:1 to all of your 3 panels and it should work.
Hope it helps.
Here's a working example. I think you want 3 vertical boxes on top of each other. If you change the vbox to hbox then the stripes will run top to bottom. I commented out the fullscreen option. I'm not exactly sure when it's needed.
app.js
Ext.application({
name: 'Sencha',
launch: function() {
var view = Ext.create('Ext.Container', {
// fullscreen: true,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
html: 'first one',
style: 'background-color: #fff',
flex: 1
},
{
xtype: 'panel',
html: 'second one',
style: 'background-color: #f00',
flex: 1
},
{
xtype: 'panel',
html: 'third one',
style: 'background-color: #0ff',
flex: 1
}
]
});
Ext.Viewport.add(view);
}
});
index.html
<!doctype html>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript"
src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
I am using Sencha Touch in my iPhone app. When I use up to three cards, my carousel works fine. But as soon as I use four cards, there is a bug:
The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.
(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)
What is going on here? I don't understand. Has anyone else met this kinda of error? Is it a real bug or a mistake in my codes?
This is my js:
Ext.setup({
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
cls: 'tab1',
html: 'Tab 1'
},
{
cls: 'tab2',
html: 'Tab 2'
},
{
cls: 'tab3',
html: 'Tab 3'
},
{
cls: 'tab4',
html: 'Tab 4'
}]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
}
});
EDIT: If you can get a working carousel with 4+ tabs, you would already prove that I have done something wrong.
Couple of possibilities here:
The use of vbox could be confusing it (though this is unlikely). Consider switching your panel configuration to just say:
new Ext.Panel({
layout: 'fit',
items: carousel
});
This could be related to a similar and slightly obscure issue we'd seen in 1.x. Try this:
Open resources/scss/application.scss and move line 23 (#include sencha-carousel;) down 4 lines so that it ends up just after the sencha-layout line
run compass compile to recompile your SASS
If it's the same issue as I saw a while back (no guarantee that it is), this will fix it
I have a page that I would like to use some sencha items on along with some non-sencha html.
So the page might be...(after loading sencha headers)
<div id="banner"><h1>#if (Model != null)
{#Model.DisplayName}</h1></div>
<div style="background-color: #CFE1E8; padding: 10px; border: 1px solid black; ">
<div id="buttonDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/button.js"></script>
<div id="searchDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/search.js"></script>
<div id="carouselDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/carousel.js"></script>
<div id="panelDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/panel.js"></script>
</div>
Each of the js files contains some sencha code to render the control into the associated div. For example:
Ext.setup({
fullscreen: false,
onReady: function () {
var panel = new Ext.Panel({
title: 'Message Title',
fullscreen: false,
renderTo: 'buttonDiv',
defaults: {
// applied to each contained item
width: 120
},
items: [
{
xtype: 'button',
text: 'Click Me',
handler: function () {
alert("You Clicked Me...");
}
}
]
});
}
});
The problem I'm having is that when the page is taller than the width of the phone, anytime I touch the screen, the page immediately jumps to the bottom of the page. The normal page scrolling doesn't work at all.
Any suggestions? Thanks.
Try assigning your components a layout and possibly a flex, e.g.:
layout: {
type: 'vbox',
align: 'stretch'
},
and
flex: 1
For scrolling, you could try:
scroll: 'vertical'
Also, another way of using HTML inside sencha is to use the html property in your components, e.g:
new Ext.Panel({
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1
items: [{
html: 'HTML content inside a panel',
}]
});
I ended up doing two things:
Added an Ext.util.Scroller on the body. There's a bug with the Ext.util.Scroller on iPhones that it won't actually let you scroll upwards. Works fine on Androids though.
"Registered" the content of each module's js as a function by pushing to a global variable so that it would get added in the head and then executed them all in a loop, so I only ran Ext.Setup once.