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
});
Related
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
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',
I am trying to dynamically add list(with its items) to my container.
Instead of simple HTML template, I need list items to contain panel with a title bar, image & few more things.
To do this I am loading store data and within its callback creating List & array of items. Then I add items to the list and list to the container but end result is just last panel visible instead of sliding list of all panels.
Here is my code:
var vLists = [];
this.load({
callback: function(records, operation, success) {
var hccontainer = Ext.getCmp('hccontainer');
this.each(function(record){
var sid = 'styleStore'+record.get('id');
var styleTemplate = eval('tpls.styleTemplate_' + record.get('id'));
vLists.push({
xtype: 'panel',
scrollable: 'false',
layout: 'fit',
cid : record.get('id'),
ctype : record.get('type'),
cname : record.get('name'),
stid : sid,
tp : styleTemplate,
items: [
{
xtype : 'titlebar',
title : record.get('name'),
docked : 'top',
cls : 'x-toolbar-transparent-top'
},
{
xtype : 'image',
src : record.get('image'),
}
]
});
});
//hccontainer.remove(Ext.getCmp('hc'), true);
Ext.getCmp('hc').destroy();
var hc1 = Ext.create('Ext.dataview.List', {
layout : 'fit',
config: {
direction: 'horizontal',
id : 'hc'
}
});
hc1.setItems(vLists);
Ext.getCmp('hccontainer').add(hc1);
},
scope: this
});
Is this right way to add items or I am missing something.
PS Instead of List if I use Carousel, this works fine
Carousel is more of a layout component than List is. It doesn't look like you need to use a list, I don't see any handler for item taps for example. If you want to avoid using templates than you should not use a List. Instead just make a component with a list-like layout. I would use a container with a vbox layout, scretched horizontally and with a static height. You can then put whatever item configuration you want into this.
I want to create Master/Base view for my SenchaTouch2 application. It should have header, footer and content zone. Header and footer are static, but content should be declared in concrete view.
I can't find solution for my problem in sencha docs. Maybe it's a wrong way? Any link to sencha guides would be helpful.
for this type of functionality you can use navigation view or create any one view with card layout and put two item with docked top and bottom which you want to fix and third itam change as per you want.
You should create a view that extend from Container or Panel with 3 items. You decide which xtype (panel, container, toolbar, etc.) is your header and footer and you should use the card layout and dock at the top or button: docked : 'top'
Then you can use the 3rd element and update the view according to your needs and using the model and controller as you want.
Define a new Ext.Container class with header and footer containers. And then create new instances of it and insert the content view. Something like this:
Ext.define('App.view.BaseView', {
extend : 'Ext.Container',
xtype : 'masterview',
config : {
items : [{
xtype : 'container',
height : 100,
html : 'This is header',
styleHtmlContent : true,
// docked : 'top' //if needed
}, {
xtype : 'container',
height : 100,
html : 'This is footer',
styleHtmlContent : true,
// docked : 'bottom' //if needed
}]
}
});
And use it like this:
var panel = Ext.create('App.view.BaseView');
panel.insert(1, {
xtype : 'container',
html : 'This is concrete view'
});
This is the most basic example. You can tweak it the way you want.
I have an Ext.Panel with a card layout nested inside a navigation view. I did this to easily switch between a map and a list without having to pop and then push a whole different view (basically to avoid the animation). So, I have a button in the navigationBar that fires an action in the controller. This initial view, with a list, load fine, but the controller code to switch between the views (using setActiveItem()) does not work. No error message. I found something about a bug where you have to call show(). Although this works, it overlays the new activeItem (the Map, in this case) on top of the navigaionBar! (see screenshot). Also, if I just change activeItem to 1 in the config of the wrapper manually, it shows the map just fine, same as the list.
My wrapper panel looks like this:
Ext.define(ViewInfos.VendorWrapper.ViewName,{
extend: 'Ext.Panel',
id: ViewInfos.VendorWrapper.PanelId,
xtype: ViewInfos.VendorWrapper.Xtype,
config:
{
layout: 'card',
title: Resources.VendorsNearby,
activeItem: 0,
items: [
{
xtype: ViewInfos.VendorList.Xtype, //Initially shown, a list
},
{
xtype: ViewInfos.VendorMap.Xtype, //What I'm trying to show, a map
}
]
}
});
and here is my controller code:
Ext.define('OrderMapper.controller.VendorWrapper', {
extend: 'Ext.app.Controller',
config: {
refs: {
vendorMap: ViewInfos.VendorMap.Xtype,
vendorList: ViewInfos.VendorList.Xtype,
vendorWrapper: ViewInfos.VendorWrapper.Xtype,
main: ViewInfos.Main.Xtype,
vendorToggleButton: (ViewInfos.Main.Xtype + ' button[action=vendorViewToggle]')
},
control: {
vendorToggleButton:{
tap: function(){
var curView = this.getVendorWrapper().getActiveItem().id;
//active view == VendorList
if(curView == 'VendorList'){
//this shows up in the console
console.log('vendorToggleButton tapped, switching to map');
this.getVendorWrapper().setActiveItem(1);
//without this line, the view doesn't even change
this.getVendorWrapper().show();
this.getVendorToggleButton().setText('List');
}
//active view == VendorMap
else if (curView == 'VendorMap'){
console.log('vendorToggleButton tapped, switching to list');
this.getVendorWrapper().setActiveItem(0);
this.getVendorToggleButton().setText('Map');
}
}
}
}
}
And here is the screenshot of the wonky view that happens on this.getVendorWrapper().show()
Also, I tried changing the wrapper to a Carousel (instead of a regular panel with a card layout), and the carousel will swipe to change list/map but setActiveItem() STILL doesn't work.
I'm currently working on a navigation.View where there is basically 4 main views from where you can push other subview. I did it like this :
Ext.define('App.view.Navigation', {
requires: [
...
],
xtype: 'mainviews',
extend: 'Ext.navigation.View',
config: {
cls: 'content',
layout:{animation:false}, // or whatever animation you want for push and pop
navigationBar: {
...
},
items: [{
xtype: 'container',
layout:'card',
items: [{
xtype: 'mainview1',
},{
xtype: 'mainview2',
},{
xtype: 'mainview3',
},{
xtype: 'mainview4',
}]
}]
}
});
Then it's really easy to either set the active item of the navigation view or push subviews
For instance, in a controller it would be
this.getMainviews().setActiveItem(X); // X = 0,1,2 or 3
and
this.getMainviews.push(view); // view = the view your want to push
and these is the references :
refs:{
mainviews: 'mainviews'
}
Hope this helps
First of all, if you just want to avoid the animation on push/pop, add this config to your navigation view:
layout: {
animation: null
}
Generally, you should not call .show() on items that are inside your Ext.navigation.View instance. They will be added to Ext.Viewport directly, thus appearing to be on top of the navigation bar.
Have a look at this JSFiddle example, might give you a hint.