In the documentation, regarding the 'rallycard' object, it states: "In general, this class will not be created directly but instead will be instantiated by Rally.ui.cardboard.CardBoard as specified by its cardConfig". I have a model of a feature and I want to show it as a card like this (below) but it is not shown in the rendered page.
var card = Ext.create('Ext.Component', {
style: {
position: 'absolute',
left: '100px', //left + 'px',
top: '100px'//top + 'px'
},
items: [{
xtype: 'rallycard',
record: feature
}],
renderTo: Ext.getBody()
});
this.down('#main').add(card);
Are you getting a console error? I would guess there are probably a few other required config options in addition to card that are tripping you up.
One other small note, you don't need both a renderTo and a call to add. In this case I'd probably drop the renderTo.
I was able to find a way to do this. Since I didn't see an example anywhere I'll answer my own question (code below). You'll have to find a meaningful value for objectId.
Rally.data.ModelFactory.getModel({
type: 'PortfolioItem/Feature',
success: function(model) {
var objectId = 1234; // <-- your objectId here
model.load(objectId, {
fetch: ['Name', 'State', 'Owner'],
callback: function(result, operation) {
if(operation.wasSuccessful()) {
var owner = result.get('Owner');
console.log('owner', owner._refObjectName);
var card = Ext.create('Rally.ui.cardboard.Card', {
style: {
position: 'absolute',
left: '100px',
top: '200px',
width: '200px'
},
record: result
});
this.down('#main').add(card);
}
},
scope: this
});
},
scope: this
});
Related
I was just wondering if we can use something like
label: "ID(id)"
where nodes object would be like :
nodes: [
{
data: { label: "IP 1", type: "ip" },
label:['EC2'],
ID:{id:'1'}
}
]
I don't see any particular documentation that specifies the use of "data" key to render.
By trying above code,it just prints it as a string and not evaluating the given expression.
Any inputs are appreciated.
Thanks in advance!
From what I could try out, we cannot use anything other than the "data()" function inside any of the selector object's members(only for which accepts a function, some only accept strings)
So to manipulate any data, we would have to keep the wanted values under "data" and use any javascript function to return our desired output.
For example :
label: function (node) {
return `${node.data("labels")} ${node.data("id")}`
}
Here lables and id are your keys and we can use any function to do manipulate the output.
This is some input (live-code) that is requested. It demonstrates the use of
label: "ID(id)"
that does not produce expected result (no evaluation).
var data = {
"nodes": [{
data: {
label: "IP_1",
type: "ip"
},
label: ['EC2'],
ID: {
id: '1'
}
},
],
"edges": []
}
//console.log(data);//uncomment this to see file content
var cy = cytoscape({
elements: data,
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "red",
//label: "data(id)",
label: "ID(id)", /* No evaluation */
//label: function (node) {return `${node.data("label")} ${node.data("type")}`} /* Evaluation OK */
}
}],
layout: {
name: "grid"
}
});
#cy {
width: 400px;
height: 200px;
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
<body>
<div id="cy"></div>
</body>
Here is the LIVE code that uses the snippet code from the answer provided by #Poornima T.
It can be executed and the result is as expected.
var data = {
"nodes": [{
data: {
label: "IP_1",
type: "ip"
},
label: ['EC2'],
ID: {
id: '1'
}
},
],
"edges": []
}
//console.log(data);//uncomment this to see file content
var cy = cytoscape({
elements: data,
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "red",
//label: "data(id)",
//label: "ID(id)", /* No evaluation */
label: function (node) {return `${node.data("label")} ${node.data("type")}`} /* Evaluation OK */
}
}],
layout: {
name: "grid"
}
});
#cy {
width: 400px;
height: 200px;
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
<body>
<div id="cy"></div>
</body>
I've got a structure like below.
I can reference (from the button handler) with up.down my component but I'm wondering if there is a more correct way to do this.
Ext.application({
name: 'MyApp',
launch: function () {
Ext.create('Ext.container.Viewport', {
items: [
{
tpl: 'Name: {first} {last}',
data: {
first: 'Peter',
last: 'Kellner'
},
padding: 20,
width: 200,
height: 200,
style: {
border: '2px solid red'
},
resizable: true,
itemId: 'myComponentItemId',
listener: {
resize: {
fn: function(component, width, height) {
console.log("w/h:" + width + " " + height);
}
}
}
},{
xtype: 'button',
text: "Disable",
handler: function () {
debugger;
this.up().down('#myComponentItemId').disable();
}
}
]
});
}
});
It is correct to use .up.down for what you are trying to do. You could use something like :
.up('form').down('button#login')
What you use in your code, on the other hand is not correct : this.up().down('#myComponentItemId'). You must pass a component selector as argument to .up().
Alternatives to .up.down are .nextSibling and .previousSibling. Similar, but more general there are also .nextNode and .previousNode.
I came across a strange problem that some 'fireEvent' in views will not act after my sencha application being building production. Before building, all is normal, the action will take place as expected, however, after building production, I found that the 'fireEvent' fired by 'this' is normal, but by a variable is anormal. Following is my code.
Ext.define('WirelessCity.view.TopMenu', {
extend:'Ext.Toolbar',
alias:'widget.topmenu',
initialize: function(){
this.callParent(arguments);
var topMenu = this;
var btn = {
xtype: 'button',
width: 42,
margin: '5 0 5 3',
border: '0',
style: 'background:url(resources/images/left_btn.png);',
handler: this.onMarkButtonTap, // will work
scope: this
};
var search = {
width: 46,
margin:'3 5 0 0',
style:'background:url(resources/images/search_btn.png);border:0;background-repeat:no-repeat;',
initialize: function(){
this.element.on({
tap: function(){
topMenu.fireEvent('searchCmd', topMenu); // will not work
}
});
}
}
this.add([btn, search]);
},
config: {
docked: 'top',
//flex: 1,
height: 38,
padding: 0,
margin: 0,
border: 0,
style: 'background:url(resources/images/top.png)'
},
onMarkButtonTap: function(){
//Ext.Msg.alert('mark');
this.fireEvent('markCmd', this);
}
});
This is because you can only pass configs when creating new components, not functions (like initialize). If you want to override methods like that, you must create your own class by extending another (Ext.Button in this case).
For your specific usage though, you can just use the element option when adding the listener:
var search = {
width: 46,
margin:'3 5 0 0',
style:'background:url(resources/images/search_btn.png);border:0;background-repeat:no-repeat;',
listeners: {
element: 'element',
tap: function() {
topMenu.fireEvent('searchCmd', topMenu);
}
}
};
Can anybody put some light on this problem
I would like to add a button to itemTpl in Sencha Touch. The key in {} will be replaced with the values in store. However, is it possible to add buttons in the template as well ?
For example, you list favorite list of music with delete button in each item.
Possible ?
I am not sure whether we can add buttons to itemTpl in Sencha-2 but we can surely add an image to itemTpl and then we can perform various operations (like in your case you want to delete).
Here is the code :-
//demo.js
Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "list",
store: "store",
itemId:"samplelist",
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemDisclosure: true,
itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
"<div class=\"list-item-title\">{title}</div>"
grouped: true
}
],
listeners:
[
{
delegate: "#samplelist",
event: "disclose",
fn: "onDiscloseTap"
}
]
},
onDiscloseTap: function (list, record, target, index, evt, options) {
this.fireEvent('ondisclosuretap', this, record);
}
});
// Democontrol.js
Ext.define("Stackoverflow.controller.Democontrol", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
Demo: "demo",
Demo1: "demo list",
},
control: {
Demo: {
ondisclosuretap: "Disclosure",
},
Demo1: {
itemtap:"imagetap"
}
}
},
Disclosure: function (list, record,target,index,e,obj) {
Ext.Msg.alert('','Disclosure Tap');
},
imagetap: function (dataview,index,list,record, tar, obj) {
tappedItem = tar.getTarget('div.x-button');
btntype = tappedItem.getAttribute('btnType');
if(btntype == 'related')
{
Ext.Msg.alert('','Image/Icon Tap');
}
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
},
init: function () {
this.callParent(arguments);
}
});
//app.css
.related-btn
{
width: 100px;
height: 100px;
position: absolute;
bottom: 0.85em;
right: 2.50em;
-webkit-box-shadow: none;
}
Hope this will help.
I have following code that I creating a grid
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' }
],
data: myData
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
renderTo: 'divGrid',
columns: [
{ text: 'Company',
flex: 1,
dataIndex: 'company'
},
{ text: 'Price',
flex: 1,
dataIndex: 'price'
},
{ text: 'Change',
flex: 1,
dataIndex: 'change'
},
{ text: '% Change',
flex: 1,
dataIndex: 'pctChange'
}],
height: 250,
width: '100%',
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});
I want to change color and width of border grid. How can I do it ?
Quick and dirty you can set this config on any grid or really any component that draws a box:
style: 'border: solid Red 2px'
The more correct way is to create a css rule and set cls:'myRedBorderRule' in the config.
EDIT:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
renderTo: 'divGrid',
style: 'border: solid Red 2px',
.....
ExtJS Grid Panel class provides you with parameters to define your custom styles. You can make use of the following class parameters :
border
bodyStyle
bodyCls
bodyBorder
bodyPadding
You can use combination of these parameters to manipulate the grid's border and body styles. Refer to the docs for details of these parameters.
Add below css to remove border
.x-panel-body .x-grid-item-container .x-grid-item {
border: none;
}