Hi I am new to sencha touch2, am facing problem while setting background image. I could not see full image on Tablet, the bottom part has been cutoff.
here is my view:
Ext.define('Test.view.LoginPage', {
extend: 'Ext.form.FormPanel',
xtype: 'loginPage',
config:{
styleHtmlContent:'true',
scrollable:'false',
styleHtmlCls:'login-Cls',
html: '<img class="logo" src="resources/images/login_Landscape_BG.png"/>'
}
});
and do i need to add tablet in profiles folder as my app targets only for Tablet.
Can you please help me. Thanks
FWIW, I had to follow this suggestion:
http://www.sencha.com/forum/showthread.php?189231-Background-Image-in-form-Panel
and use this for my CSS (added the TxPanel cls to the form panel first):
.TxPanel .x-scroll-container {
background: url('img/txbackground.png') repeat center;
}
But blechhh. This is a pretty ugly hack :-P
Try this (use Style config insteat of html config):
Ext.define('Test.view.LoginPage', {
extend: 'Ext.form.FormPanel',
xtype: 'loginPage',
config:{
styleHtmlContent:'true',
scrollable:'false',
styleHtmlCls:'login-Cls',
style: 'background-image:url(resources/images/login_Landscape_BG.png);background-repeat:no-repeat;background-size:100% 100%;'
}
});
Instead of using html, you can try using style to set full background image:
style: 'background-image: url("resources/images/sesto-exterior.jpg"); background-size: 100% 100%;'
Related
In all the examples on Sencha Touch 2 I see code samples like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
Ext.create('MyApp.view.MyView');
}
});
However, the code generated by Sencha Cmd is like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
Ext.Viewport.add(Ext.create('MyApp.view.MyView')); // <--- NOTICE THIS LINE
}
});
Notice that the example code did not add the newly instantiated View to Viewport but the actual code did. Are both codes equivalent? In the example code, how will the View add itself to the Viewport or that is optional?
Ext.Viewport is basically a container with the layout set as 'card'.
In your first sample, the class should have the config option 'fullscreen' set to true.
Setting fullscreen:true will automatically add the comoponent to the viewport when an instance is created.
Ext.define('MyApp.view.test', {
extend: 'Ext.Container',
config: {
fullscreen:true,
html: ['screen2'].join("")
}
});
Ext.create('MyApp.view.test');
From the doc for fullscreen
Force the component to take up 100% width and height available, by
adding it to Ext.Viewport.
In the second sample, a component is added to the viewport. (Don't need the fullscreen option). Like adding a panel into a container.
Ext.define('MyApp.view.home', {
extend: 'Ext.Container',
xtype: 'homecontainer',
config: {
html: ['test'].join("")
}
});
Ext.Viewport.add(Ext.create('MyApp.view.home'));
From the doc for viewport
Because Ext.Viewport extends from Ext.Container, it has as layout
(which defaults to Ext.layout.Card). This means you can add items to
it at any time, from anywhere in your code. The Ext.Viewport
fullscreen configuration is true by default, so it will take up your
whole screen.
I've got little problem with wicked_pdf footer render.
Here is my render method:
def invoice
render pdf: "#{#order.number}.pdf",
footer: { html: { template: "admin/orders/invoice_footer.html" } },
margin: { bottom: 25 }
end
PDF render works OK, but there is no footer template. I tried different margins in wicked settings, but with no success.
Just had this same issue, the problem seemed to be that my wkhtmltopdf install did not generate the footers as requested.
The version I had was installed via the Ubuntu repository, I un-installed this and downloaded a pre-built version as described here and now it works fine:
https://github.com/mileszs/wicked_pdf/wiki/Getting-Started-Installing-wkhtmltopdf
I did run into the same problem and it was a problem with the partial not being rendered.
So this answer https://stackoverflow.com/a/19323701/784318 did work for me:
So I changed my code from this:
options = {
header: {html: {template: 'shared/_header', layout: nil}},
}
To this:
options = {
header: {content: render_to_string('shared/_header', layout: nil)},
}
I am trying to take a picture using camera in Sencha Touch 2. Here i have one button 'Take a Picture', when i will press it, camera should start. As i am new to this sencha touch 2, i am unable to figure it out, how to do this?
For this i used the below code:
Sencha Fiddle Link
Please help me. I do not want to use Phone gap.
You have to add device folder of Sencha Library in root directory
and add below code in
Ext.require('Ext.device.Camera');
and use this code for capture image using camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
If you want to use purely sencha, then you can check this code:
xtype: 'button',
handler: function(button, event) {
Ext.device.Camera.capture({
source: 'camera',
destination: 'data',
success: function(imagedata) {
var img = Ext.getCmp('theimage');
img.setSrc('data:image/jpeg;base64,' +imagedata);
},
failure: function() {
Ext.Msg.alert('Error', 'There was an error when acquiring the picture.');
},
scope: this
});
But if you want to use phonegap camera features, may be you have to change the code. As sencha is giving the default feature to handle the camera, i wish not to go with phonegap. Hope it will help..
Iam using sencha touch for building mobile application, Ia m using card layout switch in my tab panel. sometimes the card layout is not working properly. Please help me regarding this.
App.views.TabPanelView = Ext.extend(Ext.TabPanel, {
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'horizontal'
},
items: [item1, item2,item3,item4,item5]
}
}
First you should change horizantal to horizontal
simple Just Put cover: false in your cardSwitchAnimation. Hope it works
I am using the Sencha Touch framework for the development of my iPad application.
I am in need of using Map as a part of the screen(say half a page). When I try to do put a map component into my page, its covering the full page overlapping the previous components.
Please share your suggestions.
Thanks in advance,
Easwar
Please post some code to show what you have done / tried yourself so far.
Anyway, I think you're looking for the method: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-cfg-dockedItems
var panel = new Ext.panel.Panel({
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Docked to the top'
}]
}]
});