Related
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.
What I'm trying to do here is to use a card layout within the panel of a carousel. But it seems impossible that it's not common to create a card layout and the carousel is actually one of the card-layout-like container. So I wonder if it can be achieved in Sencha Touch 2.
Here is my main view, a plain carousel container:
Ext.define("myapp.view.Main", {
extend: 'Ext.carousel.Carousel',
config: {
defaults: {
styleHtmlContent : true
},
activeItem: 0,
items: [
{
xtype: 'firstview'
},
{
xtype: 'secondview'
},
{
xtype: 'thirdview'
}
]
}
});
and here is my 'firstview', which extends the Ext.Panel as part of the carousel container:
Ext.define("myapp.view.Compose", {
extend: 'Ext.Panel',
xtype: 'firstview',
requires: [
'Ext.form.FieldSet',
'Ext.TitleBar',
'Ext.form.Text',
'Ext.Button'
],
config: {
styleHtmlContent: true,
scrollable: true,
layout: 'vbox',
items: [
{ // title bar
xtype: 'titlebar',
docked: 'top',
title: 'a Title here'
},
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{ // controll button set - to change view for composing different kinds of messages
xtype: 'segmentedbutton',
allowDepress: true,
allowMultiple: false,
items: [
{
text: 'subview-1',
pressed: true
},
{
text: 'subview-2'
},
{
text: 'subview-3'
}
]
}
]
},
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
config: {
height: '100%',
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
}
]
}
});
as you can see, there is a card layout within this panel. But as a matter of fact nothing is not going to display.
Of course, I can find another way out to achieve some thing similar here, but I just want to know is it impossible to embed a card container into a card-layout-like container, for example, 'tabPanel' or 'carousel' in sencha touch 2?
Hey in the Compose widget replace the the part with id:'id_compose_card'
with this
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
flex: 1,
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
I just took out the parts inside the config object and put them outside. Im getting this feeling that u cant nest a config inside another config object for a class definition. A lot of people are having issue and this seems to be the problem. You might want to confirm this on their forum.
Then I also replaced the attribute
height: '100%',
with this
flex:1
This will tell the vbox layout to make your component fill the remaining space.
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')
}
}]
}]
});
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()
});
});