I took this code from another question and now I'm trying to get the four buttons to fill the entire window.
Nothing that I do seems to have an affect. The fullscreen: true option seems to always be ignored. What's the trick to know you need to adjust the layout so that it takes all the vertical space?
Ideally, I'd like this solution to work for a 3x3 button layout too.
app.js
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
// fullscreen: true,
layout: {
type: 'vbox',
flex: 1
},
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'button',
height: '50%',
text: 'flat button',
ui: 'plain',
flex: 1,
handler: function() {
alert('top left')
}
}, {
xtype: 'button',
height: '50%',
//ui: 'plain',
flex: 1,
handler: function() {
alert('top right')
}
}]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'button',
height: '50%',
//ui: 'plain',
flex: 1,
handler: function() {
alert('bottom left')
}
}, {
xtype: 'button',
//ui: 'plain',
height: '50%',
flex: 1,
handler: function() {
alert('bottom right')
}
}]
}]
});
Ext.Viewport.add(view);
}
});
Standard index.html that uses Sencha Touch CDN.
<!doctype html>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<body>
</body>
</html>
I've modified something to meet exactly what you need (3x3 buttons layout). Good luck! :)
P/S: I've removed handler functions to make the source code easier to catch.
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
layout: {
type: 'vbox',
},
items: [
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
}
]
}
]
});
Ext.Viewport.add(view);
}
});
Thiem Nguyen's answer might work for what you need but this will work for stretching the buttons across the screen.
view = Ext.create('Ext.Container', {
layout:'hbox',
items:[ {
xtype: 'container',
width:'50%',
layout: 'vbox',
items:[{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('top left')
}
},{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('top right')
}
}]
},{
xtype: 'container',
width:'50%',
layout: 'vbox',
items:[{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('bottom left')
}
},{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('bottom right')
}
}]
}]
});
Related
I have a Problem with Carousel From Sencha Touch 2. I'm getting a border around my App in iPhone. What should I have to do to remove this border from app?
Here is my Code:
var mainPanel = ({
xtype: 'carousel',
id: 'playersView',
ui: 'light',
flex: 1,
layout: {
type: 'fit'
},
items: [
playerLiveMonitorView,
blackPlayerLiveMonitorVie
]
});
var topPanel = ({
xtype: 'panel',
width: '100%',
height: '10%',
layout: {
type: 'vbox',
},
items: [
{
xtype: 'panel',
width: '100%',
layout: {
type: 'hbox',
},
items: [
serverBtnPanel,
logoImagePanel
]
},
roundImagePanel
]
});
this.add([topPanel, mainPanel]);
I am trying to set the 'ui' property of my navigation view to light, but it only shows in the dark theme. Here's my view. What am I missing?
Ext.define('VisitTCMIndy.view.Social', {
extend: 'Ext.navigation.View',
xtype: 'socialcard',
config: {
iconCls: 'chat',
title: 'Social',
layout: 'card',
ui: 'light',
items: [
{
xtype: 'panel',
title: 'Social',
layout: 'vbox',
items: [
{
xtype: 'panel',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Facebook',
src: "resources/images/facebookbutton.png",
flex: 1
},
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Twitter',
src: "resources/images/twitterbutton.png",
flex: 1
}
]
},
{
xtype: 'panel',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Pinterest',
src: "resources/images/pinterestbutton.png",
flex: 1
},
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Instagram',
src: "resources/images/instagrambutton.png",
flex: 1
}
]
},
{
xtype: 'button',
text: 'Take a Picture',
style: 'margin:3%'
}
]
}
]
}
});
If you mean that you want to change the ui of the navigation bar of the navigation view, then should do this:
config: {
iconCls: 'chat',
title: 'Social',
layout: 'card',
navigationBar: {
ui: 'dark'
}
...
Hope this helps
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'm trying to dynamically add a component to a container with the hbox layout specified
and have that container re-size itself to accommodate the new component. Currently the
new component is added, but the new and old components are re-sized / or tiled in the
container and the container maintains its size.
Here is a demonstration of the issue I'm having on jsfiddle.
Here is the relevant extjs4 javascript for the demo:
Ext.onReady(function(){
Ext.create ('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
items: [
{
xtype: 'container',
layout: 'hbox',
padding : 5,
items: [
{
xtype: 'container',
id: 'textfieldgroup',
flex: 1,
height: '100%',
border: false,
layout: {
type: 'vbox',
},
defaults: {
flex: 1,
},
items: [
{
xtype: 'textfield',
emptyText: 'type here',
},
],
},
{
xtype: 'button',
flex: .1,
text: '+',
listeners: {
'click' : function () {
var textFieldGroup =
Ext.ComponentQuery.query ('#textfieldgroup')[0];
var newTextField = Ext.widget ('textfield');
textFieldGroup.add (newTextField);
},
}
}
]
}
],
renderTo: Ext.getBody ()
});
});
I have found a suitable solution and my reasoning is that you cannot have a vbox dynamically expand within an hbox container. The added benefit is that this method enables you get rid of one level of nesting. Also using the layout property autoSize: true enables the vbox container to expand and dynamically re-size itself.
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
flex: 1,
title: 'Group of fields',
width: '100%',
items: [
{
xtype: 'container',
layout: 'hbox',
width: '100%',
items: [
{
flex: 1,
xtype: 'label',
text: 'Fields',
},
{
xtype: 'button',
flex: 1,
text: '+',
listeners: {
'click': function() {
var textFieldGroup =
Ext.ComponentQuery.query('#textfieldgroup')[0];
var newTextField = Ext.widget('textfield');
textFieldGroup.add(newTextField);
},
}}
]
},
{
xtype: 'container',
layout: {
type: 'vbox',
autoSize: true,
},
id: 'textfieldgroup',
defaults : {
// flex: 1,
},
items : [
{
xtype: 'textfield',
emptyText: 'type here',
}
]
}
]}
],
renderTo: Ext.getBody()
});
});
I'm trying to get two buttons to show up next to each other in an Ext.Panel.
The .js code:
ProductView = new Ext.Panel({
styleHtmlContent: true,
scroll: 'vertical',
items: [
new Ext.DataView({
scroll: false,
store: productStore,
tpl: productTpl,
itemSelector: 'div.productView',
}),
{
xtype: 'button',
ui: 'blue-round',
height: '60',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
text: 'Share',
handler: function() {
// ...
}
}
]
});
The SCSS code:
#include sencha-button-ui('green', $branded-green);
#include sencha-button-ui('blue', $branded-blue);
This yeilds buttons that look like this:
I thought this may have been a sizing issue, but adding the width: '40%', attribute to each button only yields:
However, I'm wanting the buttons to sit next to each other instead of be stacked on top of each other. Any suggestions?
UPDATE:
I tried to take advantage of the align: property, but this did nothing:
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '40%',
align: 'left',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
width: '40%',
align: 'right',
text: 'Share',
handler: function() {
// ...
}
}
You could wrap the buttons in a panel and set that panel's layout to hbox. That is basically what you did with the toolbar, but it won't have the toolbar styling if you don't want that. also, fyi with the hbox layout, you can specify 'flex' config options to components which determine how they are sized relative to each other
Okay, so the answer so far has been to wrap the whole thing in a toolbar. (I originally didn't do so, as these buttons are not to be docked. They are to show up under a scrolling DataView.) I had to squeeze the buttons in a bit as they were over extending past the edge of the toolbar and being cut off. I also had to change the height of the toolbar to accommodate the larger buttons and make its background transparent.
The button portion of the .js code now looks like:
{
xtype: 'toolbar',
height: '62',
items: [
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '48%',
text: 'Buy',
handler: function() {
// ...
}
}, {xtype: 'spacer'}, {
xtype: 'button',
ui: 'green-round',
height: '60',
width: '48%',
text: 'Share',
handler: function() {
// ...
}
}
]
}
{ xtype : 'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'}, {
{xtype: "button",
text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },
You can use hbox layout to render the buttons horizontally using Sencha.
This is the sample code which works fine,
{ xtype :'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'},
{xtype: "button", text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },