i am trying to align button vertically and then want to set it to the bottom of the screen
but as soon as i set its property bottom:0 buttons go down but they dont stretched full in width.
wht i want is i want to set it to bottom and fullscreen in width.
here is my code
Ext.define("ca.view.cav",{
extend:'Ext.Container',
xtype:'cv',
requires:['Ext.Button','Ext.Panel'],
config:{
bottom:0,
defaults: {
margin: '10 0 0 0'
} ,
items:[{
xtype:'button',
text:'YES'
},{
xtype:'button',
text:'NO'
},{
xtype:'button',
text:'PROBABLY YES'
},{
xtype:'button',
text:'PROBABLY NO'
},{
xtype:'button',
text:'DON\'T KNOW'
},{
xtype:'button',
text:'SKIP'
}]
}
});
and i am adding this container in to other panel as xtype:cv
Seems like it works to just add width: '100%' to the config:
config:{
bottom:0,
width: '100%',
defaults: {
xtype:'button',
margin: '10 0 0 0'
},
items:[{
text:'YES'
},{
text:'NO'
},{
text:'PROBABLY YES'
},{
text:'PROBABLY NO'
},{
text:'DON\'T KNOW'
},{
text:'SKIP'
}]
}
See here: http://new.senchafiddle.com/#/lWv9p/
Related
I have the following form defined:
Ext.define('Admin.view.messaging.MsgDataForm',{
extend: 'Ext.window.Window',
xtype: 'msgdataform',
title: 'Compose Practice Message',
defaultFocus: '[name=subject]',
modal: true,
layout: 'fit',
closable: false,
width: 700,
items: [{
xtype: 'form',
layout: 'anchor',
fieldDefaults: {labelWidth: 60,labelAlign: 'right',anchor: '100%'},
padding: 10,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Date',
items: [{
xtype: 'datefield',
name: 'msgdate',
format: 'F j, Y g:i A',
readOnly: true,
flex: 1,
margin: '0 5 0 0'
},{
xtype: 'combo',
name: 'priority',
fieldLabel: 'Priority',
store: Ext.create('Ext.data.Store',{
fields: ['priorityval','priority'],
data: [{'priorityval':0,'priority':'Low'},{'priorityval':1,'priority':'Normal'},{'priorityval':2,'priority':'High'}]
}),
queryMode: 'local',
displayField: 'priority',
valueField: 'priorityval',
width: 160
}]
},{
xtype: 'textfield',
name: 'subject',
fieldLabel: 'Subject'
},{
xtype: 'textarea',
id: 'editor1',
name: 'message',
style: {background: '#E1E1E1'}
}]
}],
buttons:[{
text: 'Send',
handler: 'onClick_btnMsgDataSend'
},{
text: 'Cancel',
handler: 'onClick_btnMsdDataCancel'
}]
});
The height of the textarea is not properly sized when the window is rendered. Additionally, when the window is resized, only the width of the textarea is resized - not the height. Attempting to listen to the resize event on the text area after the window is resized but it isn't fired. Any ideas? Thanks.
You width is properly resized because of the default configuration of 'anchor:100%'.
On the other hand, the height it's a little bit more difficult, the idea that comes to me now is try to with a particular css (using property cls) manipulate the height (height:'100%') or something like that. Because you can't use flex in a textarea, you could also nest de textarea in a panel and use flex on it to try it.
Check the documentation of textarea of ExtJS5 for other posible solutions:
http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.form.field.TextArea
This is my code.I config tab panel in cofig session.i took tow items 1) Property Condition Report
2) Inspection Report i want add background image to these tab panel items.
config: {
style: 'background-color: white;border:0;width:100%',
flex: 1,
tabBar: {
layout: {
pack: 'center',
align: 'center',
}
},
items: [{
title: 'Property Condition Report',
xtype: 'propertyConditionReport'
},{
title: 'Inspection Report',
xtype: 'inspectionReport'
}, ],
},
Add a css class to each item and then apply some styles.
Here a tutorial about theming.
items: [{
title: 'Property Condition Report',
xtype: 'propertyConditionReport',
cls:'propertyConditionReport' // css class
},{
title: 'Inspection Report',
xtype: 'inspectionReport',
cls: 'inspectionReport' // css class
}]
I am just a beginner for sencha touch technology. Now I got a simple question. How can I adjust the fieldset width and align to center only? I only get the fieldset which are setting for fullscreen only. Please guild me a solution.
Here my javascript
items:[{
xtype:'fieldset',
title :'Please enter your password key',
centered: true,
width: 30,
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
width : 400,
}]
}],
Don't use Hard Coded values in the code, that's bad when you making the application for multiple resolution
Please try the code shown below it works for me
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items:[{
xtype:'fieldset',
title :'Please enter your password key',
//centered: true,
//width: 30,
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
//width : 400,
}]
}]
Thanks
try this,
items:[{
xtype:'fieldset',
title :'Please enter your password key',
centered: true, // using this you can align fieldset to center
width: '80%', // using this you can give any width to it in percentage
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
}]
}],
OR
items:[{
xtype:'fieldset',
title :'Please enter your password key',
// centered: true,
margin: '10%',
width: '80%',
height: '20%',
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
}]
}],
hope this may help you.
try
style: {
textAlign: 'center',
width: '100px' }
in ST2
place it inside the container like this
{
xtype: 'container',
centered: true,
items:{
xtype: 'fieldset',
items :[
//your items here
]
}
}
I'm trying to build an interface that has a header bar with a logo centered in the top. Here's the code I'm using. The image doesn't show. Upon inspecting the elements at run time, element is showing with a height of '0' instead of using the 100% to match the height of the containing element.
Ext.define("RFN.view.Main", {
extend: 'Ext.TabPanel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Calculate',
iconCls: 'home',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[
{
xtype: 'image',
src: 'resources/images/logo.png',
height: '100%'
}
],
flex: 1
},
{
xtype: 'panel',
style: 'background-color: #999999;',
flex:4
}
]
},
{
title: 'Compare',
iconCls: 'chart2',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
style: 'background-color: #174a7c;',
flex: 1
},
{
style: 'background-color: #999999;',
flex:4
}
]
}
]
}
});
Just add a layout config on the panel that contains the image. You can then remove the height config on you image as the layout make the inner item fit the whole height and width automatically :
...
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[{
xtype: 'image',
src: 'resources/images/logo.png',
}],
flex: 1
...
Hope this helps
Or you can do what I did and have a layout of vbox, the header had a flex of 0.3 and my tabpanel 0.7. The item that was 0.3 was a panel, and in the class config (cls) I had my CSS class name e.g. Header. In my CSS class .header I had set the background and logo. Hope this helps...
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, }, ], },