Design hierarchial grid in rally using jira open api as data source - rally

I'm writing a custom HTML app using the 2.1 rally SDK. My tasks are:
Write a custom html app to design a hierarchical grid where the data should
be obtain from a fetch call from Jira Open API.
Filter the grid with any word provided
This is my code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
associations: [
{type: 'hasMany', model: 'UserChild', name: 'UserChild'},
{type: 'hasMany', model: 'Defects', name: 'Defects'},
],
proxy: {
type: 'ajax',
url : './Users.json',
reader: {
type: 'json',
root:'users'
}
},
});
Ext.define("UserChild", {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
belongsTo: 'User'
});
Ext.define("Defects", {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
belongsTo: 'User'
});
var grid=Ext.create('Rally.ui.grid.Grid', {
store: Ext.create('Rally.data.Store', {
model: 'User',
autoLoad:true,
enableHierarchy: true
}),
columnCfgs: [
{
text:'FormattedId' , dataIndex : 'FormattedId'
},
{
text: 'Name', dataIndex: 'Name'
},
{
text:'email' , dataIndex : 'email'
}
]
});
this.add(grid);
}
});
Users.json file is as below:
{
"users": [
{
"FormattedId": 1,
"Name": "Ed Spencer",
"email": "ed#sencha.com",
"UserChild":{
"FormattedId": 3,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
},
"Defects" :{
"FormattedId": 4,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
}
},
{
"FormattedId": 2,
"Name": "Abe Elias",
"email": "abe#sencha.com",
"UserChild":{
"FormattedId": 5,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
},
"Defects" :{
"FormattedId": 6,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
}
}
]
}
I want a hierarchical grid with user data and not rally data store.

I think you are going to come to a problem when you try to fetch Jira data from within a Rally app. You will most likely be prevented from doing that because of CORS.
The second big problem you will have is that all the Rally SDK objects are based on their being a 'record' object with all the right variables and procedures. The hierarchy is based on children collections of various types, not associations. The hierarchical grids make that even harder because they use a hand-crafted bit of black magic to get it all to work together and is very resistant to modifications.
Good luck.

Related

extjs 6.2 grid, create columns from store dynamically

In my extjs 6.2 project I am trying to create columns for my grid from the store which is dynamic.
My grid is created on view page
title: 'Data Viewer',
xtype: 'grid',
itemId: 'gridDataViewerId',
bind: {
store: '{storeData}'
},
ui: 'featuredpanel-framed',
cls: 'custom-grid',
margin: '5',
//frame: false,
//forceFit: true,
//height: '100%',
flex: 1,
plugins: [{
ptype: 'gridexporter'
}]
Once the store is loaded I am trying to create the columns and populate the data but its not working. Any ideas what I am doing wrong?
this.storeData.load({
url: x.util.GlobalVar.urlData_getData,
params: {
cid: cid,
email: localStorage.getItem('username'),
dateStart: targetStart,
dateEnd: targetEnd,
filename: targetFile
},
callback: function (response, opts) {
debugger;
var columnModel = me.storeData.data.items;
me.myGrid.reconfigure(me.storeData, columnModel);
}
});
I think my problem is creating the column array from my store. If I try do do it manually it works... but I need to do it dynamically.
Use the store's metachange listener. Something like:
myStore.on('metachange', function(store, meta){
myGrid.reconfigure(store, meta.columns);
}
Where the store data looks something like this:
{
"records": [{
"id": 74474,
"name": "blah",
"age": 5
},{
"id": 74475,
"name": "asfdblah",
"age": 35
}],
"totalRecords": 2,
"metaData": {
"fields": [{
"name": "name"
},{
"name": "age",
"type": "number"
}],
"columns": [{
"text": "Name",
"dataIndex": "name",
"width": 150
},
{
"text": "Age",
"dataIndex": "age"
}],
},
"success": true
}

Using a call-back function within datatables buttons extension

I'm using jQuery Datatables buttons extension.
"buttons": [
{
extend: 'colvis', //column visibility
className: 'data_export_buttons'
},
{
extend: 'print',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
className: 'data_export_buttons',
exportOptions: {
columns: ':visible'
}
}
]
Everything works, however, I would like to use the above code as a call-back function. So instead of repeating the same lines across all my tables (I have over 15), I would just call the function like this:
var table = $('#table').DataTable({
"paging": true,
"info": false,
"ordering": true,
"columnDefs": [
{ "targets": [0], "orderable": false}
],
export_data() // the call-back function for colvis and export button extensions
});
I have tried this but it didn't work. My table lost data.
Is there a way to achieve this?
Yep, you can't do a callback there, but a just as tidy way would be to create a variable, something like
myButtons = [
{
extend: 'colvis', //column visibility
className: 'data_export_buttons'
},
// snip
];
Then, when you create your tables:
var table = $('#table').DataTable({
"paging": true,
"info": false,
"ordering": true,
"columnDefs": [
{ "targets": [0], "orderable": false}
],
"buttons": myButtons
});

How to specify rootProperty for nested data if it is one level below?

I am fetching nested data to be shown as nested list but whenever I tap on top level item, it again shows same top level list instead of showing children list and a ajax request is fired to fetch json data again. Here is the store:
Ext.define('MyTabApp.store.CategoriesStore',{
extend:'Ext.data.TreeStore',
config:{
model : 'MyTabApp.model.Category',
autoLoad: false,
storeId : 'categoriesStore',
proxy: {
type: 'ajax',
url: 'resources/data/catTree.json',
reader: {
type: 'json',
rootProperty: 'data.categories'
}
},
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("categories tree loaded");
console.log(records);
}
}
}
});
and here is the data in that file which I am using to mock service:
{
"data":{
"categories": [
{
"name": "Men",
"categories": [
{
"name": "Footwear",
"categories": [
{ "name": "Casual Shoes", "leaf": true },
{ "name": "Sports Shoes", "leaf": true }
]
},
{
"name": "Clothing",
"categories": [
{ "name": "Casual Shirts", "leaf": true },
{ "name": "Ethnic", "leaf": true }
]
},
{ "name": "Accessories", "leaf": true }
]
},
{
"name": "Women",
"categories": [
{ "name": "Footwear", "leaf": true },
{ "name": "Clothing", "leaf": true },
{ "name": "Accessories", "leaf": true }
]
},
{
"name": "Kids",
"categories": [
{
"name": "Footwear",
"categories": [
{ "name": "Casual Shoes", "leaf": true },
{ "name": "Sports Shoes", "leaf": true }
]
},
{ "name": "Clothing", "leaf": true }
]
}
]
}
}
This is the list:
Ext.define('MyTabApp.view.CategoriesList', {
extend: 'Ext.dataview.NestedList',
alias : 'widget.categorieslist',
config: {
height : '100%',
title : 'Categories',
displayField : 'name',
useTitleAsBackText : true,
style : 'background-color:#999 !important; font-size:75%',
styleHtmlContent : true,
listConfig: {
itemHeight: 47,
itemTpl : '<div class="nestedlist-item"><div>{name}</div></div>',
height : "100%"
}
},
initialize : function() {
this.callParent();
var me = this;
var catStore = Ext.create('MyTabApp.store.CategoriesStore');
catStore.load();
me.setStore(catStore);
}
});
The list starts working properly without any ajax request on each tap if I remove data wrapper over top categories array and change rootProperty to categories instead of data.categories. Since server is actually returning categories in data object I cannot remove it so how do I fix the store in that case? Also why is that additional ajax request to fetch the file?
[EDIT]
Tried to create a fiddle http://www.senchafiddle.com/#d16kl which is similar but not same because it is using 2.0.1 and data is not loaded from external file or server.
Last time I had this exact situation, it was because one of my top level category was a leaf but I had not set leaf:true. Doing so recalled the top level of the nested list as if it was a child.
It seems from your Fiddle that if your data is in this following format, it would work fine:
{
"categories" : [{
"name" : "Foo",
"categories" : [{
...
}]
}]
}
That is, just remove the "data" property and make defaultRootProperty: 'categories' & rootProperty: 'categories'. Check this: http://www.senchafiddle.com/#d16kl#tIhTp
It works with external data file as well.

Sencha Touch Model Associations not populating children

I have an employee-favorites relationship that I have mapped using the hasMany/belongsTo semantics in my models. In my store, I simply set the root and point to the root array, but I'm not seeing the favorites portion of the model getting populated. Any ideas?
My model for Person:
Ext.define('People.model.Employee', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'cn'}
],
hasMany: { model: 'Favorite', name: 'favorites' }
}});
Model for Favorite:
Ext.define('People.model.Favorite', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'uid'},
{ name: 'fullName'}
],
belongsTo: 'Employee'
}});
Store:
Ext.define('People.store.Favorites', {
extend: 'Ext.data.Store',
requires: [
'People.model.Employee',
'People.model.Favorite'
],
config: {
autoLoad: false,
model: 'People.model.Employee',
storeId: 'Favorites',
proxy: {
type: 'jsonp',
url: People.app.favSearchUrl,
reader: {
type: 'json',
idProperty: 'cn',
rootProperty: 'records'
}
}
}});
The JSON I'm trying to consume is as follows:
{
"records": [
{
"_id": "5106f97bdcb713b818d7f1f1",
"cn": "lsacco",
"favorites": [
{
"fullName": "Friend One",
"uid": "friend1"
},
{
"fullName": "Friend Two",
"uid": "friend2"
}
]
}
]
}

Proper use of the rootProperty in Sencha Touch 2

I am trying to use the rootProperty value in a Sencha Touch 2 store to load some JSON I retrieved from the Foursquare Venues API and for the life of me I cannot get it to work.
According to the docs I should setup my rootProperty in dot notation to equal "response.venues" but it does not populate the list. I put the json in a separate file and removed the "response" and "venues" headers and it worked fine. There must be something blatantly obvious I'm missing here as I can't find a straight answer anywhere.
My model:
Ext.define('App.model.4SqVenue', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', id: 'id'}
]
}
});
My store:
Ext.define('App.store.4SqVenues', {
extend: 'Ext.data.Store',
requires: [
'App.model.4SqVenue'
],
config: {
model: 'App.model.4SqVenue',
storeId: '4SqVenuesStore',
proxy: {
type: 'jsonp',
url: 'foursquare venue request',
reader: {
type: 'json',
rootProperty: 'response.venues'
}
}
}
});
My view:
Ext.define('App.view.4SqVenues', {
extend: 'Ext.List',
xtype: '4SqVenuesCard',
requires: [
'App.store.4SqVenues'
],
config: {
fullscreen: true,
itemTpl: '{name}',
store: '4SqVenuesStore'
}
});
The response from the 4sq API:
{
"meta": {
"code": 200
},
"response": {
"venues": [
{
"id": "4a3ad368f964a52052a01fe3",
"name": "Four Peaks Brewing Company",
"contact": {
"phone": "4803039967",
"formattedPhone": "(480) 303-9967",
"twitter": "4PeaksBrewery"
},
"location": {
"address": "1340 E 8th St",
"crossStreet": "at Dorsey Ln.",
"lat": 33.4195052281187,
"lng": -111.91593825817108,
"distance": 1827,
"postalCode": "85281",
"city": "Tempe",
"state": "AZ",
"country": "United States"
},
"categories": [
{
"id": "4bf58dd8d48988d1d7941735",
"name": "Brewery",
"pluralName": "Breweries",
"shortName": "Brewery",
"icon": {
"prefix": "https://foursquare.com/img/categories/nightlife/brewery_",
"sizes": [
32,
44,
64,
88,
256
],
"name": ".png"
},
"primary": true
}
],
"verified": true,
"stats": {
"checkinsCount": 24513,
"usersCount": 8534,
"tipCount": 235
},
"url": "http://www.fourpeaks.com",
"likes": {
"count": 0,
"groups": []
},
"menu": {
"type": "foodAndBeverage",
"url": "https://foursquare.com/v/four-peaks-brewing-company/4a3ad368f964a52052a01fe3/menu",
"mobileUrl": "https://foursquare.com/v/4a3ad368f964a52052a01fe3/device_menu"
},
"specials": {
"count": 0,
"items": []
},
"hereNow": {
"count": 1,
"groups": [
{
"type": "others",
"name": "Other people here",
"count": 1,
"items": []
}
]
}
}
]
}
}
I have a very similar issue. Basically all is good if I load the json without the rootProperty defined. But once I define it things stop working (bad configuration error reported in Architect).
So the belwo works opnlu until I define the rootProperty as 'records'
{ "records" : [ { "artist" : "Champion",
"index" : 1,
"recordid" : "r00899659",
"trackname" : "1 To 2"
},
{ "artist" : "Champion",
"index" : 2,
"recordid" : "r00899668",
"trackname" : "Is Anybody There?"
}
.......
],
"rowcount" : 10,
"timestamp" : "1/07/2012 5:05:19 AM"
}
first, you have to wrap it in a function call as Per documentation for the response. Then you may have to use a convert function inside your model. Such as setting the root property to response, and then using convert to bring in all the other data from the venue property.