I was working through some sencha touch tutorials and i can't figure out how to add a button to the left of tabs in TabPanel view. By default a button is added to the right of tabs. I have tried changing align and layout settings but nothing seems to be working. Here is the simple code that I'm trying to modify
Ext.setup({
onReady: function() {
new Ext.TabPanel({
fullscreen: true,
tabBar:{
items:[{
xtype: 'button',
ui: 'round',
text: 'Round'
}]
},
items: [{
title: 'Tab 1',
html: '1',
}, {
title: 'Tab 2',
html: '2',
}, {
title: 'Tab 3',
html: '3',
}]
});
}
});
Try this:
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Round',
dock: 'left'
}]
},
Related
I want signature popup in my application.
'https://market.sencha.com/extensions/signature-pad-field'
This works for me but It opens one panel then on click on that panel it opens signature popup.
But I directly want to open Signature popup.
Please guide me. Thanks in advance.
By using below code as your "/signaturefield/app/view/Signature.js", you can achieve this:
Ext.define('myApp.view.Signature', {
extend: 'Ext.Container',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet'
],
config: {
layout: 'card',
items: [{
xtype: 'formpanel',
padding: '10 10 10 10',
items: [{
xtype: 'fieldset',
hidden: true,
items: [{
xtype: 'signaturefield',
id: 'signatureField',
sigWidth: 350,
sigHeight: 150,
label:'Enter Signature',
labelWidth: '20%'
}]
},{
xtype: 'button',
text: 'Get Data',
margin:'0 0 10 0',
action: 'getSignature'
},{
xtype: 'button',
text: 'Set Data',
action: 'setSignature'
}]
}]
},
initialize: function() {
this.callParent();
Ext.getCmp('signatureField').openCanvasSheet();
}
});
Hope this will be helpful :)
I am using Extjs 4.1.1
I have panel on which I have added toolbar at bottom side.
This toolbar has 3 items, I want to aling first item in first row, and rest two items in next row, i.e. one below others.
as shown in the image, I want to align the items as shown above to the Red Rectangle.
My code is as given below.
Please suggest How can I do that?
my code is like this
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
height:60,
items: [
{
xtype: 'tbtext',
id:'costId',
text : "Total Cost <br> $66,000",
height : 40
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'saveButton',
text: 'Add to BOM',
handler: function() {
saveProduct();
}
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'cancelButton',
text: 'Cancel',
handler: function() {
cancel();
}
}
]
}],
One possible solution would be adding two bottom toolbars to the panel. Just like this:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [{
text: 'Add to BoM',
cls: 'add-to-bom-button'
}, {
text: 'Cancel',
cls: 'cancel-button'
}]
}, {
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [costContainer]
}]
where costContainer is
var costContainer = Ext.create('Ext.container.Container', {
border: false,
layout: 'vbox',
items: [{
xtype: 'label',
html: 'Total Cost',
cls: 'total-cost-label'
}, {
xtype: 'label',
html: '$ 66,000',
cls: 'price-label'
}]
});
I think this example looks like what you are looking for, just have to fix the css.
http://jsfiddle.net/alexrom7/LHK39/3/
I have started to work on Sencha touch a week ago and I still no able to figured out how to create a view. I want to create textfield and listView. Listview shold be shown below the textfield. I am able to show either ListView or textfield as I am able to extend only Ext.panel or Ext.List.
Please help. Please share a link those give details about creating views in Sencha touch.
Ext.define('TrainEnquiry.view.SearchTrains', {
extend: 'Ext.Panel',
alias: "widget.searchtrains",
requires: [ 'Ext.dataview.List','Ext.form.FieldSet','TrainEnquiry.store.Homes'],
config: {
title: 'Train Enquiry',
items: [
{
xtype: 'fieldset',
style:'width:70%; margin:10px',
padding: '10px',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},{
xtype: 'homepagelist',
style: 'margin-Top:100px',
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}
]
}
});
Showing list views when you are also using a containing element (like a panel) is one of the trickiest things in Sencha, in my opinion. It can be done, but you have to set the layout: 'fit' property on the panel. You'll also need to dock your fieldset to the top (assuming you want it at the top, and probably turn that simple title attribute into a titlebar view within the panel. Here's a link to a SenchaFiddle demonstrating an example of how to do this, and some code for you below:
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
items: [
{
xtype: 'titlebar',
title: 'Train Enquiry',
docked: 'top'
},
{
xtype: 'fieldset',
docked: 'top',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},
{
xtype: 'list',
itemTpl: '<div class="myContent">'+
'<div><b>{name}</b> </div>' +
'</div>',
data: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' },
{ name: 'Item 4' }
]
}
]
});
(By the way next time keep searching, this is the question/answer that most likely would have helped you most: sencha don't seeing the list in a panel)
Avoid using inline styling.
If you want the fieldset to stick to the top of the main panel always and the list to scroll, use layout:'fit' inside the main panel config and add docked: 'top' at the fieldset config.
If you want both of them to scroll, remove main panel layout (which will take layout:'auto'), put scrollable:true in main panel config and add scrollable:false in list config. Like this:
config: {
title: 'Train Enquiry',
scrollable : true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}]
},{
xtype: 'homepagelist',
scrollable: false, // no scrolling for the list
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}]
}
Get the code here: http://www.senchafiddle.com/#x8rZo#fRzwt
I want to create a custom toolbar using sencha touch. Using Ext.Toolbar, i am able to create a decent screen titlebar. But my requirement is to place my company brand image logo in the center of the title bar not the simple text as provided by the code below.
{
xtype : 'toolbar',
docked: 'top',
title: 'My Toolbar'
}
can anyone help me how to do this ?
Try this
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'image',
width:218,
height:44,
src:'http://cdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png'
}
]
}
You can add the image in your toolbar by using the title attribute. Here is some modified code from one of my apps doing just this. Also, by defining a custom class you can assign a custom xtype and reuse the main toolbar... Either way the code should have what you are looking for:
Ext.define('myApp.view.Maintoolbar', {
extend: 'Ext.Toolbar',
xtype: 'maintoolbar',
requires: [
//any necessary requirements
],
config: {
docked: 'top',
title: '<div style="text-align:center;"><img src="images/logoSmall.png" width="185" height="36" alt="Company Name"></div>',
padding: '5 5 5 5',
items: [{
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
//left: true,
text: 'Menu',
action: 'openmenu'
},{
xtype: 'spacer'
},{
xtype: 'button',
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
align: 'right',
text: 'Logout',
action: 'logout'
}]
},
initialize: function() {
this.callParent();
}
});
I want to add regular Sencha button to TabPanel in Sencha Touch 2
Sencha Fiddle http://www.senchafiddle.com/#tRd76
Code:
//define the application
Ext.application({
launch: function() {
addTabPanel();
}
});
function addTabPanel(){
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
fullscreen: true,
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}]
},
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
},
{
title: 'Favorite',
iconCls: 'favorites',
html:'Favorite',
itemTpl: '{mwRow}',
}
]
});
}
When Adding Button1 to TabPanel button is not shown.
Why Button1 is not Showing ?
Please help?
Here's a quick way to do it. I'm not sure there is another way...
Ext.application({
launch: function() {
addTabPanel();
var tp = Ext.ComponentQuery.query('tabpanel')[0];
var btn = Ext.create('Ext.Button',{
width:80,
height:30,
text:'BTN',
style:'position:absolute;top:auto;bottom:13px;left:5px;z-index:10;'
});
tp.element.insertFirst(btn.element);
}
});
function addTabPanel(){
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
fullscreen: true,
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}]
},
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
},
{
title: 'Favorite',
iconCls: 'favorites',
html:'Favorite',
itemTpl: '{mwRow}',
}
]
});
}
Here's the fiddle : http://www.senchafiddle.com/#HvTek
Hope this helps
put code snippet into Home item, something like this,
....
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
items: [
{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}
],
},
...
I hope this helps. :)