{
xtype: 'textfield',
itemId: 'dueDate'
}
I have above code, I have to change the border colour of the textfield. So I tried to use Ext.getDom('dueDate'); to get the Dom element. Unfortunately it is returning null.
Try to use this code
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
}
You need to specify border color and style.
Related
I want to pass the colorModelData for rectangle shown below.
Requirement is: on click of button i want to open a popup. And inside popup want to display multiple number of circles with different colors. Using button can i create a popup which will give me list of colors? ALso list of color should be exposed from outside.
How can i do it?
Rectangle {
id: control
property var colorModelData: ["Red", "Green", "Blue"]
Button{
id: btn
width: 100
height: 100
onClicked: {
rect.visible = true
}
}
Rectangle{
id: rect
visible: false
width: 400
height: 300
color: "gray"
anchors.top: btn.bottom
GridView{
width: rect.width
height: rect.height
model: colorModelData
delegate: Column{
Rectangle {
width: 20
height: 20
radius: width/2
//color: colorModelData [..... getting error]
}
}
}
}
}
I tested your code and it works for me. So I assume the only part you're missing is the line you have commented out. Use this:
color: colorModelData[index]
I am using the upload image widget and I want to add a text overlay but don't know how, can someone answer me?
thumbnailTransformation: [{ width: 300, height: 300, crop: 'fill', border: "2px_solid_red" }],
You'll need to include an overlay key that's an object with overlay parameters, in this case, text specific.
For example -
thumbnailTransformation: [
{
width: 300,
height: 300,
crop: 'fill',
border: "2px_solid_red"
},
{
overlay: {
font_family: "Arial",
font_size: 20,
text: "Test"
},
gravity: "north_east"
}
]
Below is a JSFiddle you can try: https://jsfiddle.net/rhdvgy19/
All the other available text styling options can be found here -
https://cloudinary.com/documentation/image_transformations#styling_parameters
I am using a teaching bubble inside a coach mark, same as the example in here
enter link description here
How can I have the teaching bubble in white instead of blue?
You can pass in the styles prop to the TeachingBubbleContent that contain this object:
{
closeButton: {
color: 'red',
selectors: {
':hover': {
background: 'gainsboro',
color: 'red'
},
':active': {
background: 'darkGray',
color: 'red'
}
}
},
content: {
border: '1px solid black',
background: 'white',
},
headline: {
color: 'black'
},
subText: {
color: 'black'
}
}
Example here in this codepen: https://codepen.io/vitalius1/pen/xoEPzg.
The only thing thing you can't do easily is to change the Coachmark's drop color in a way that is still visible. You can try by passing color prop to it and specify white, but because there is no border or shadow around the drop all you'll see is the beacon animation. And if you try give it a border it won't look nice (see codepen) because of how the drop is constructed. Also, there is currently a bug in passing the beaconColorOne and beaconColorTwo props to change the beacon color that I am fixing right now :)
Hope that helps!
I am new to sencha touch. I have a button with a compose icon. The icon appears in the right bottom corner of my button as per the given size of the button. Can anyone help me in aligning it? iconAlign attribute is not working for me.
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
action:'landedInfo'
}
You have to set the padding property to 0 because the width and height you provide are too small and therefore are messing with the 'center' value you provide for 'iconAlign':
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
padding:0,
action:'landedInfo'
}
One way to see it is to increase to width and height to, say 100x50, then you will get a centered icon without touching the padding property...
I admit this might be tricky to spot at first.
Hope this helps
Setting the margin in css helped me put the icon in the center:
.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose
{
margin-left:-5px;
margin-top:-5px;
margin-right:-7px;
margin-bottom:-5px;
}
I tries this and works for me:
{
xtype: 'button',
ui: 'normal',
text:'LOGOUT',
iconMask: true,
iconCls: 'user',
iconAlign:'center',
padding:0,
cls: 'x-iconalign-top',
}
if you use icon-font, you can do it with css.
.x-button-icon {
/*Icon centering*/
position:absolute;
width:1em;//set width of icon relative(icon is font)
top:50%;
margin-top:-0.5em;//half of icon height shift back
left:50%;
margin-left:-0.5em;//half of icon width shift back
}
You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.
Suppose I have 3 different Panels [bottomCar0,bottomCar1,bottomCar2] and want to adjust the height and width of them as per my requirement, how can i do that??
My Code :
var bottomCar=new Ext.Panel({
layout:{
type:'hbox',
align:'stretch'
},
defaults:{
flex:1
},
items: [bottomCar0,bottomCar1,bottomCar2]
});
how can i change the defaults??
Thnaks
Sneha
The thing is, that you setted flex:1. This will give the property flex:1 to each one of your items. This will force them to capture the available space, accordingly the remaining space, devided by the number of the setted flex objects.
Like if u have, in your case, 3 items with flex:1, than each will get 33% of the available height.
What you need to do is remove the flex from the defaults and give it to the panel itself, than set the dimensions.
You can set inside the defaults the height and width, if all of them will get the same values
defaults:{
height: 200,
width: 300
}
or set to each item its height and width
items: [
{
title: 'Home',
iconCls: 'home',
height: 200,
width: 300
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen',
height: 100,
width: 150
}
]
More on Flex
Shlomi.
OR you can add "cls" to your panel and adjust it in css file.