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.
Related
I am currently trying to use mixed chart types with vue-chartjs for a bar chart and a line chart(vue-chartjs#4.1.2, vuejs#2.6.14, chartjs#3.0.0).
As you can see in the following image the grid for the line chart (colored red) is not aligned with the grid for the bar chart.
mixed chart types
How I'm implementing the mixed chart types
const
chartContainer = this.chartContainer = this.chartContainer || document.createElement('canvas'),
data = {
datasets : [
{
data : rcd.getLineData(tAx.records),
borderColor : '#ff9e9e',
hoverBackgroundColor : '#ff0000',
fill : false,
stepped : 'end',
type : 'line',
xAxisID: 'xLine',
radius: 0,
},
{
data : rcd.getBarData(tAx.records, record, tAxs),
borderColor : '#ff9e9e',
backgroundColor : 'rgba(187,242,193,1)',
hoverBackgroundColor : '#a5eeac',
fill : true,
stepped : true,
type : 'bar',
barPercentage : 1.0,
categoryPercentage: 1.0,
xAxisID: 'xBar'
}
};
chartContainer.setAttribute('height', 100);
chartContainer.setAttribute('width', tAxModel.totalSize);
this.element.appendChild(chartContainer);
this.chart = new Chart(
chartContainer,
{
drawBorder : false,
data,
options : {
responsive : false,
animation : {
duration : 0
},
elements : {
point : {
radius : 0,
hoverRadius : 0
}
},
layout : {
padding : {
top : 5,
left : -10,
bottom : -19
}
},
plugins : {
legend : {
display : false
}
},
scales : {
xLine : {
offset: false,
grid : {
display : true,
offset : true,
color: 'red'
},
ticks : {
display : false,
}
},
xBar : {
grid : {
display : true,
offset : true
},
ticks : {
display : false,
}
},
y : {
borderWidth : 0,
min : 0,
ticks : {
display : false,
borderWidth : 0,
},
grid : {
borderWidth : 0,
display : true
}
},
},
tooltips: {
mode: 'index'
},
interaction : {
mode: 'index',
intersect : false,
axis : 'x'
}
},
}
);
Both charts get arrays with the same length and the same x-values for each item.
For example bar and line chart receive an array with values like {x: 'February 13, 2023', y: (value for bar or line chart)}
Logging this.chart and this.chart._sortedMetaSets I kind of found out that the difference for one pointElement to the next pointElement for line charts data is not equal to bar charts data.
For instance line charts pointElements: {x: 0, ...}, {x: 71.25, ...} -> it's 71.25 - but for bar charts pointElements: {x: 35, ...}, {x: 105, ...} -> it's 70.
Furthermore I found that the categoryScale for bar chart has difference to the line charts categoryScale.
Examples are _gridLineItems, _valueRange and _startValue.
Is there anything wrong in my implementation or my data?
Thank you in advance!
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.
For loading the Cy3-exported network, this works great:
cy.add(network.elements); // where 'network' is the json object exported by Cy3
What command loads and applies the exported vizmap? This command ran to completion, but the visual style of the network bears no resemblance to what we see in Cy3.
cy.style().fromJson(vizmap).update() // where 'vizmap' is the json vizmap object from Cy3
Advice, anyone? Perhaps even a small example?
Thanks!
Paul
Rather than loading this data after init, have you tried using the init options instead. That's where style is specified.
cytoscape({
style: networkJson.path.to.style,
elements: networkJson.path.to.elements
// ...
});
Edit: It looks like Cytoscape-desktop generates JSON like this
[ {
"title" : "hallmarksOfCancer",
"style" : [ {
"selector" : "node",
"css" : {
"text-opacity" : 1.0,
"width" : 70.0,
"border-opacity" : 1.0,
"background-color" : "rgb(255,255,255)",
"background-opacity" : 1.0,
"font-size" : 20,
"shape" : "ellipse",
"border-width" : 1.0,
"border-color" : "rgb(0,0,0)",
"color" : "rgb(0,0,0)",
"height" : 30.0,
"text-valign" : "center",
"text-halign" : "center",
"font-family" : "SansSerif",
"font-weight" : "bold",
"content" : "data(label)"
}
}, {
"selector" : "node[score > 4.6]",
"css" : {
"width" : 140.0
}
}, {
"selector" : "node[score = 4.6]",
"css" : {
"width" : 140.0
}
}, {
"selector" : "node[score > 0.0][score < 4.6]",
"css" : {
"width" : "mapData(score,0.0,4.6,70.0,140.0)"
}
}, {
In that case, you can use something like style: visjson[i].style in your init options, where i ranges on 0 <= i <= visjson.length. Cytoscape desktop exports several stylesheets at once, so you 'll need to specify which one (i.e. i) you want to use.
When i press save button then its work fine. But I face some problem when i press enter on this field the error message is this.up(...).down(...) is null. My from window is given below.
I just want to, when you press enter on a textbox, it will act like you clicked the button.
Can anyone help?
Ext.define('${pkgName}.v01i002001.SV01I00200201' , {
extend : 'Ext.window.Window',
alias : 'widget.sv01i00200201',
id : 'sv01i00200201',
title : 'MANUFACTURE :: SV01I00200201',
minimizable : false,
maximizable : false,
autoShow : true,
resizable : false,
border : false,
modal : true,
padding : '0 5 0 5',
icon : "${resource(dir: 'images', file: 'APP01003.png')}",
layout : {
type: 'vbox',
align: 'stretch'
},
initComponent : function () {
var me = this;
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
this.items = [
{
xtype : 'form',
bodyStyle : {
padding : '10px',
border : true
},
tbar: Ext.create('Ext.ux.StatusBar', {
id : 'win-statusbar-sv01i00200201',
topBorder :true,
text :'Status',
defaultIconCls : 'info',
defaultText : 'Status'
}),
items : [{
xtype : 'textfield',
fieldLabel : 'Id',
name : 'id',
width : 265,
anchor : '95%',
emptyText : 'Not need...',
readOnly : true
},{
xtype : 'textfield',
fieldLabel : 'Manufac. Name',
emptyText : 'Write Manufacturer name',
allowBlank : false,
name : 'name',
width : 265,
anchor : '95%',
listeners: {
specialkey : function(field, e){
if (e.getKey() == e.ENTER || e.getKey()==e.TAB) {
//Ext.get('save-sv01i00200201').dom.click(); //it work
// this.up().up().down('button[action=save]').fireEvent('click'); //TypeError: button.up is not a function
// this.up('sv01i00200201').down('button[action=save]').fireEvent('click');//TypeError: button.up is not a function
// this.up('window').down('button[action=save]').fireEvent('click'); //TypeError: button.up is not a function
}
}
}
}]
}]
this.buttons = [
{
text : 'Save',
icon : "${resource(dir: 'images', file: 'SAV01004.png')}",
id : 'save-sv01i00200201',
action : 'save'
},{
text : 'Close',
icon : "${resource(dir: 'images', file: 'CLS01001.png')}",
scope : this,
handler : function(button){
var win = button.up('window');
win.close();
}
}]
me.callParent(arguments);
}
});
My controller given below
Ext.define('${pkgName}.C01I002001', {
extend : 'Ext.app.Controller',
requires: [],
views:[
'V01I001000',
'v01i002001.SV01I00200100',
'v01i002001.SV01I00200101',
'v01i001001.SV01I00200104',
'v01i001001.SV01I00200106',
'v01i002001.SV01I00200201',
'v01i002001.SV01I00200301'
],
refs : [{
ref : 'v01i002001',
selector: 'window'
}],
init: function() {
manuStore = Ext.data.StoreManager.get('S01I002001');
var me = this;
me.category = undefined;
me.control({
'sv01i00200201 button[action=save]': {
click : this.manufacturerSave
}
});
},
manufacturerSave : function(button){
win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
if(form.getForm().isValid()){
var manufacturer = Ext.create('${appName}.model.M01I002001',{
name:values.name
});
manufacturer.save({
scope:this,
success:function(records, operation){
var text = operation.response.responseText,
json = Ext.decode(text);
form.loadRecord(records);
controller000.statusbar('sv01i00200201', json.message, 'saveInfo', 'activecaption');
manuStore.load();
var win = Ext.getCmp('sv01i00200201');
controller000.closeWindow(win);
},
failure:function(model, operation){
controller000.statusbar('sv01i00200201', operation.error, 'warnInfo', 'red');
}
});
}else{
controller000.statusbar('sv01i00200201', 'Necessary Field Required', 'warnInfo', 'red');
}
}
});
this.up() bubbles up through only one level targeting the direct parent of your field (the form panel). Try one of these options instead :
this.up().up().down('button[action=save]').fireEvent('click');
this.up('window').down('button[action=save]').fireEvent('click');
this.up('#sv01i00200201').down('button[action=save]').fireEvent('click');
Take a look at the documentation ;)
Part 2 : "button.up is not a function"
I think I got it, you have to manually pass the button as an argument to the fireEvent function :
var button = this.up('window').down('button[action=save]');
button.fireEvent('click', button);
At last i do it by createing id like as
Ext.get('save-sv01i00200201').dom.click();
button modified and create id
{
text : 'Save',
icon : "${resource(dir: 'images', file: 'SAV01004.png')}",
id : 'save-sv01i00200201',
action : 'save'
}
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);