I am creating a segmented button and i need to modify the app based on the value of the segmented button.
{
margin : '5 -5 0 25',
xtype: 'segmentedbutton',
allowMultiple: true,
height : 40,
id : 'fontStyleBtn',
items: [
{
text: 'B',
width : 50,
style: 'background-color:red !important',
action : 'boldText'
},
{
text: 'I',
width : 50,
style: 'font-size:14px;font-style:italic;background-color:#008c99',
action : 'italicText'
},
{
text: 'U',
width : 50,
style: 'font-size:14px;background-color:#008c99;text-decoration:underline',
action : 'underlineText'
}
]}
when i tap on B, the text in my app is getting bold. But i need to set a value to it, so that next time i tap on it, i can reset the text to normal.
Ext.getCmp('fontStyleBtn').getItems()[0].pressed = true;
This doesn't seem to be working for me.
Does Ext.getCmp('fontStyleBtn').getItems()[0] exactly return the "B" button?
If yes, try this instead:
Ext.getCmp('fontStyleBtn').getItems()[0].setPressed(true);
Related
I am developing an application for android devices using Titanium Appcelerator., I need list view that should be like Expandable list, like children within the childrens, (Example: 3 storey)..
I went through this link and worked for 2 storeys and when i attempted to make 3 storey , it give me a bug, I can insert a new row dynamically , But i couldn't access the custom variables. What have i made mistake...
Reference link
//Third Row
var row3 = Titanium.UI.createTableViewRow({
title : "User Management",
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
height : 'auto',
isparent : true,
opened : false,
color : 'black',
borderRadius : 5,
borderColor : 'black',
borderWidth : 1,
sub : [{
className : 'children',
title : "Approve Registration",
isparent : true,
opened : false,
color : 'brown',
left : 20,
sub : [{
className : 'child1',
title : "Cross Connect",
color : 'blue',
left : 25,
font : {
fontSize : '15dp'
},
isparent : false,
}, {
className : 'child1',
title : "Smart Hands",
color : 'blue',
left : 25,
font : {
fontSize : '15dp'
},
isparent : false,
}],
height : 'auto',
font : {
fontSize : '15dp'
},
}, {
className : 'child',
title : "Invite Portal Users",
color : 'blue',
left : 20,
font : {
fontSize : '15dp'
},
isparent : false,
}, {
className : 'child',
title : "Add Users",
color : 'blue',
left : 20,
font : {
fontSize : '15dp'
},
isparent : false,
}]
});
rowData.push(row3);
tableView.addEventListener('click', function(e) {
Ti.API.info('isparent...' + e.row.isparent);
});
I can get values to the first parent,But when i clicked the dynamically added children data
i getting "undefined"
Sorry for such late reply, but have you tried using the getParent() function to get the parent object of any element.
Actually, getParent() is not listed anywhere in Titanium documentation, but you can use this function anywhere to get any number of levels of parent,grandparent of a child.
Hope it would help you & try creating the layout using Alloy as it will provide you more flexibility & a clean view to know the parents & child levels.
I want to fix my table/grid header in my ExtJs 4.2 application, so that the header is allways visible, while scroling. The main grid in my application has a fixed header and is implemented as in the code in the bottom of this post.
It is not working and I don't know why...
I tried it with the split attribute, but it isn't working, too... :(
This is the code:
function openThePopup() {
var win = new Ext.Window({
modal : true,
height : 500,
width : 900,
plain : true,
border : false,
resizable : false,
maximizable : false,
draggable : true,
closable : true,
closeAction : 'destroy',
title : 'Title',
autoScroll : true,
buttonAlign : 'center',
items : [ {
xtype : 'grid',
id : 'theGrid',
store : theStore,
border : 0,
layout : 'fit',
margins : '5 0 0 0',
split : true,
columns : [ {
text : 'Country',
dataIndex : 'country'
}, {
text : 'City',
dataIndex : 'city'
}, {
text : 'ZIP',
dataIndex : 'zip'
}, {
text : 'Street',
dataIndex : 'street',
width : 200
}, {
text : location,
dataIndex : 'name',
width : 200
} ],
listeners : {
itemdblclick : function(t, record, item, index, e, eOpts) {
...
}
}
} ],
buttons : [ {
onClick : function() {
...
}
} ]
}).show();
}
I appriciate any help.
Thank you very much in advance.
Best wishes to all of you.
Your layout isn't configured correctly. The layout: 'fit' should go on the window and the layout configuration should be removed from the grid. Also remove the autoScroll config on the window.
I would like to change color of chart in extjs type ='pie'.
Can I use renderer in the series block please see the example:
..... },
series : [ {
type : 'bar',
axis : 'bottom',
gutter : 0,
groupGutter : 0,
yField : this.fields,
title : this.fieldTitles,
stacked : true,
fill: true,
scope: this,
renderer: function(sprite, record, attr, index, store) {
var color = this.fieldColors[index];
return Ext.apply(attr, {
fill: color
});
},.....
Instead of a custom renderer, you can use the colorSet property for your series.
series: [{
colorSet: this.fieldColors,
...
}]
See http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Pie-cfg-colorSet
I have a grid with 3 column, and one of those column has an actioncolumn, with a button on it;
My scenario; If the user comes from clicking on a button of the friend view then i need to show the following grid (with the actioncolumn button), but when the user comes from clicking on the teacher view, then i need to have 2 buttons displayed in the action column. How can i do that ?
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('friendStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
});
You can always create two actioncolumns, one with one button and the other with two buttons, and hide the one that you don't need.
...
xtype : 'actioncolumn',
hide : this.fromTeacherView, //a boolean
...
the fromTeacherView is in this case a boolean that is a config parameter given to the grid when it is instantiated.
Not sure if this is what you are looking for.
In the sencha scrollable views, like Ext.dataview.ListView, we can always scroll the list of elements out of the screen.
If I take this example : http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/list
Is there a way to block the list item "Alana Wiersma" ? I want this item to be with "top <= 0px".
Your problem is exactly called overscrolling. Try this:
scrollable : {
direction: 'horizontal',
directionLock: true,
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 5
},
outOfBoundRestrictFactor: 0
}
My first guess would be to set up the scroller of the list with an initial offset
config:{
scrollable:{
direction:'vertical',
initialOffset : {x: 0, y: VALUE}
}
}
And replace VALUE with whatever value you need
Hope this helps