i'um using a top toolbar and bootom toolbar into a panel like this:
var panel = new Ext.Panel({
fullscreen: true,
renderTo: 'pnlLogin',
layout: {
type: 'vbox',
align: 'left'
},
items:[
{
xtype: 'textfield',
flex: 1,
id: 'ioUser',
label: 'User'
},
{
xtype: 'textfield',
flex: 1,
id: 'ioPwd',
inputType: 'password',
label: 'Password'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Restricted Area'
},
{
dock : 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm-round',
handler: function(b,e){
btnLoginClick();
}
}
]
}
]
});
the problem is BOTTOM TOOLBAR not appears!!
it appears only after i move my tablet!!
how can i solve it?
i need that it appears after panel render!
thanks!
Where is btnLoginClick(); method ?
if the file which cantent this method is load after this panel then this problem may happens...
Related
Below is my view. how can I make my menu scroll separate and my view scroll separate
Ext.define('HaBoMobile.view.AboutView', {
extend: 'Ext.Container',
xtype: 'aboutViewType',
html: 'Learn more about me',
styleHtmlContent: true,
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
config: {
fullscreen: true,
items: [{
docked: 'top',
xtype: 'titlebar',
items: [{
text: 'Menu',
action: 'nav',
iconCls: 'list'
}]
}]
}
});
I tried all these settings, none worked
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
here is a Sencha fiddle
Just try with scrollable: true, like this:-
var menu = Ext.create('Ext.Menu', {
scrollable: true, // add this property
width: 200, // Need to set a width
items: [{
text: 'Close',
ui: 'decline'
}, {
text: 'Home',
action: 'nav_option',
iconCls: 'home'
}, {
text: 'Settings',
action: 'nav_option',
iconCls: 'settings'
}]
});
Containers:-
Ext.define('Fiddle.view.Main', {
extend: 'Ext.Container',
xtype: 'mainview',
config: {
scrollable: true,
html: 'Main page',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Main',
items: [{
text: 'Nav',
action: 'nav'
}]
}]
}
});
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/
For some reason my form panel isn't showing. Can anyone help? I'm a newbie so sorry if this is obvious! It was build with Sencha Architect but I can't understand why no fields are showing in the form?...
Ext.define('MyApp.view.Login', {
extend: 'Ext.Container',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My Title'
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
text: 'Call'
},
{
xtype: 'button',
text: 'Email'
}
]
},
{
xtype: 'container',
flex: 1,
border: 2,
items: [
{
xtype: 'formpanel',
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
label: 'Field'
},
{
xtype: 'textfield',
label: 'Field'
}
]
}
]
}
]
}
]
}
});
To display formpanel (Ext.form.Panel) using Sencha Touch 2.3+ correctly inside other container you need to add scrollable: null property
{
xtype: 'formpanel',
scrollable: null,
items: [
...
]
}
See discussion here
Change the layout of your Login view from vbox to fit. Then set the layout of the container that contains your formpanel to fit also.
Check this link for more info about layouts in Sencha Touch.
I have a controller function for my list that is being called when the list item is tapped, within this function I am trying to update a button component's text as follows:
var button = this.getPopupButton();
//reference popupButton is set within controller
button.setText('Test');
The function seems to work, and console.info(button.getText()); is reporting the update, but within the UI the text remains the default as set in the config.
Is this a bug? Or am I doing something wrong here?
These buttons are within a segmented button object:
items: [
{
xtype: 'segmentedbutton',
flex: 1,
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 2,
id: 'PopUpButton',
text: 'Pop up test!'
},
{
xtype: 'button',
flex: 1,
id: 'Mini',
ui: 'action',
text: 'Mini test!'
}
]
}
]
Update: It might help to know that these buttons are segmented buttons within a datalist toolbar, see complete code below:
Ext.define('TestApp.view.ItemList', {
extend: 'Ext.dataview.List',
alias: 'widget.ItemList',
config: {
loadingText: 'Loading items...',
store: 'ItemStore',
cls: [
'ItemList'
],
itemTpl: Ext.create('Ext.XTemplate',
'<div>{itemData}</div>',
),
plugins: [
{
xtype: 'component',
refreshFn: function(plugin) {
//console.info('pull to refresh!');
var store = plugin.up().getStore();
console.log(store);
},
itemId: 'PullToRefresh',
loadingText: 'Loading...',
pullRefreshText: 'Pull down to refresh...',
releaseRefreshText: 'Release to refresh...',
snappingAnimationDuration: 200,
type: 'pullrefresh'
},
{
autoPaging: true,
loadMoreText: 'Load more...',
noMoreRecordsText: 'No more data in feed',
type: 'listpaging'
}
],
items: [
{
xtype: 'toolbar',
docked: 'top',
id: 'MediaToolbar',
ui: 'light',
zIndex: 3,
items: [
{
xtype: 'button',
flex: 1,
cls: 'SourceSelectButton',
id: 'SourceSelectButton',
minWidth: '',
width: 83,
iconCls: 'ItemSource1',
text: ''
}
]
},
{
xtype: 'toolbar',
docked: 'top',
height: '45px',
id: 'FeedSelectorBar',
ui: 'light',
zIndex: 3,
items: [
{
xtype: 'segmentedbutton',
flex: 1,
id: 'FeedSelectorButtons',
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 2,
id: 'PopUpButton',
text: 'Pop up test'
},
{
xtype: 'button',
flex: 1,
id: 'TesterButton',
ui: 'action',
text: 'Latest'
}
]
}
]
}
]
}
});
Update #2: After further testing in the console using Ext.ComponentQuery.query() I have found that I can manipulate all buttons in my application EXCLUDING the ones placed within the dataview list/toolbar.
Try following changes, this is working for me:-
Give 'id' to your segmented button.
{
xtype: 'segmentedbutton',
id: 'hii', // give id to your segmented button
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
id: 'PopUpButton',
text: 'Pop up test!'
},
{
xtype: 'button',
id: 'Mini',
ui: 'action',
text: 'Mini test!'
}
]
}
Use this code inside controller on 'itemtap' of your list.
var button = Ext.getCmp('hii'); // use your segmented button id here
button.getAt(1).setText('Test');
This problem was solved by moving my Ext.dataview.List into a Ext.panel container. This seems to be a bug with sencha touch 2.0.1.1. Any elements that I manipulated within my dataview.List toolbar component would report as updated in the console but would not show as updated in the UI. The same problem occured in both Chrome, Safari and on an Android device packaged as a phonegap project.
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();
}
});