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
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
});
How can I display all items in Ext.List that are nested in Ex.Panel dynamically,
that means the height of nested Ext.List must be dynamic, and how to add a scrollbar for parent, that is Ex.Panel?
Thanks!
Ext.define('framework.view.ShoppingCart', {
extend: 'Ext.Panel',
alias : 'widget.ShoppingCart',
id: 'ShoppingCart',
requires: [
],
config: {
autoDestroy: true,
fullscreen : true,
items: [
{
xtype: 'fieldset',
id: 'shoppingCartItemsTitle',
title: Util.getMessageInner('mstore_item_list',null,0),
height : 27,
border: 0,
margin: "10 10 6 10",
cls: 'items_hided'
},
{
xtype : 'list',
itemId : 'itemList2',
id: 'itemList2',
autoDestroy: true,
selectedCls: 'x-item',
scrollable: 'vertical',
height : '100%',
itemTpl: new Ext.XTemplate(
'<div class="as_icon_list as_icon_list_bg height_68">',
' <div style="margin:7px 0 0 10px; float:left">',
'<div style="display:block;">{gName}</div>',
'<div style="display:block;">',
ASVari.appInfo.currencyName + ' {[Util.formatMoney(values.gPrice)]} × ',
'{gQuantity}',
'</div>',
'</div>',
'</div>'
)
}
]
}
});
I am not sure what it is that you are trying to accomplish...
As far as dynamically setting the data dynamically, you can use the getData() and setData(), getHeight() and setHeight() method for Ext.Panel() and Ext.data.List().
Based on some event you can listen for in a controller you could get all the properties from one view and set them into another view.
For 'how to add a scrollbar for parent, that is Ex.Panel?' I'm really unsure about what you are asking but I think you are looking for something like a scrollable container with items next to a static container that contains a details view.
If that is the case check out the hbox layout. You would do something drop a list with flex : 1 next to a container with details and flex : 5 (or whatever). You would then listen for itemTap on the list and load the container view with the desired data.
Sorry that this was brief but with such a vague question I didn't want to spend the time answering a question you weren't asking.
Please let me know how I might get you some better information.
Good Luck,
Brad
I would like to hide clear icon from textbox in sencha control through code.
How to do it?
Please provide sample code.
Thanks
Try this ::
{
xtype : 'textfield',
clearIcon : false,
name : 'name',
id : 'whatever'
}
There's a config property called clearIcon that you can toggle.
You can add this to you global CSS
.x-field-clearable.clear-icon-hidden .x-field-input .x-clear-icon {
display: none;
}
and then when you want to hide the clear icon of a field you just get your field and do
field.addCls('clear-icon-hidden');
Hope this helps
You can simply set the clearIcon config to false. Like this,
Ext.getCmp('ID OF THE TEXTFIELD').setClearIcon(false);
Example:
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
id: 'textfield1',
label: ''
},
Solution:
Ext.getCmp('textfield1').setClearIcon(false);
Since I'm not sure what version of Ext JS this was pertaining to, here is an update for Ext JS 6.5.x as it no longer uses clearIcon.
{
xtype: 'textfield',
itemId: 'tfLastName',
label: 'Last Name',
value: 'Allord',
*clearable: false*,
editable: false
},
This is also for the modern toolkit, per Sencha documentation; the classic toolkit doesn't have this feature.
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 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.