Develop Reference

How to load dynamic data in a list/table inside a panel-EXTJS

I'm trying to create a panel like:
with the below code as a beginning, however I'm not sure how can I create a list/table inside a panel in a way like it looks below in the image.
I also have to load the data dynamically inside the panel.
also I'm using panel since I want it to be a collapsible one
$cls.superclass.constructor.call(this, Ext.apply({
items: [
this.section({
items: [
this.panel = new Ext.Panel({
items: [
this.section({
items: []
})
],
collapsible: true,
})
]
})
]
}, cfg));
Ext.extend($cls, Panel, {
getData: function(data) {
//here I have the entire data I want to show in the list. just not sure how?
}
});
any ideas?

You can create custom rows with Ext.Panel. The example shows only show creating list. To add part where AND, OR you can change structure of data and create row with nested panel row.
Here is example of creating custom list with panel:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'ExtJS Master Panel',
items: [
collapsibleList = new Ext.Panel({
title: 'Collapsible List',
collapsible: true,
hideBorders: true,
padding: '10px',
height: 400
})
],
getData: function () {
return new Promise(function (resolve) {
setTimeout(function () {
resolve([{
name: 'Last VM Scan',
decider: 'LESS THAN',
period: '30 days'
}, {
name: 'Last CERTVIEW Scan',
decider: 'LESS THAN',
period: '14 day'
}, {
name: 'Last checked In',
decider: 'LESS THAN',
period: '10 days'
}]);
}, 1000);
});
},
listeners: {
afterrender: function () {
console.log(collapsibleList);
Promise.resolve(this.getData()).then(function (data) {
for (var i = 0; i < data.length; i++) {
var pan = new Ext.Panel({
xtype: 'panel',
layout: 'hbox',
hideBorders: true,
items: [{
xtype: 'panel',
padding: '10px',
width: 200,
items: [{
xtype: 'label',
text: data[i].name
}]
}, {
xtype: 'panel',
padding: '10px',
width: 300,
items: [{
xtype: 'label',
text: data[i].decider
}]
}, {
xtype: 'panel',
padding: '10px',
items: [{
xtype: 'label',
text: data[i].period
}]
}]
});
collapsibleList.add(pan);
}
collapsibleList.doLayout();
});
}
}
});
});
Working Fiddle Link: https://fiddle.sencha.com/#view/editor&fiddle/2l14

Assigning tpl with values for DOM manipulation in extjs

I have filter checkbox one after the other as below:
Now I want to change it to:
My approach to this problem is:
I am selecting the DOM and looping through it to select all the check boxes:
var x = $("table .x-form-type-checkbox")
$(x).each(function (index, value){
console.log(value.children)
});
OUTPUT:
I am creating the extjs combobox dropdown as:
Ext.application({
name: 'timefilter',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: Ext.get('newfilter1'),
fieldLabel: 'Time Frame',
labelAlign: 'right',
displayField: 'name',
editable: false,
multiSelect: false,
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="radio" />', '{name}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: [{
type: 'string',
name: 'name'
}],
data: [{
"name": "Today"
}, {
"name": "This week"
}, {
"name": "This month"
}, {
"name": "Next week"
}, {
"name": "Next month"
}, {
"name": "All time"
}]
}),
queryMode: 'local',
listeners: {
select: function(combo, records) {
var node;
Ext.each(records, function(rec) {
node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function(combo, rec) {
var node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
OUTPUT:
Now I am tring to loop and map the value.children that contains each checkbox input to tpl as below:
var x = $("table .x-form-type-checkbox")
$(x).each(function(index, value) {
Ext.application({
name: 'timefilter',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: Ext.get('newfilter1'),
fieldLabel: 'Activity Status',
labelAlign: 'right',
displayField: 'name',
editable: false,
multiSelect: false,
tpl: value.innerHTML,
queryMode: 'local',
listeners: {
select: function(combo, records) {
var node;
Ext.each(records, function(rec) {
node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function(combo, rec) {
var node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
console.log(value.children)
});
But I am not getting expected OUT its:
Please let me know where I am doing wrong or is there a better approach.

You can implement this functionality using store.filter() method inside of combobox select event.
In this Fiddle, I have created a demo using same store.filter() method and select event of combo.
Node this is just an example you can change based on your requirement.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ComboCheckbox', {
extend: 'Ext.form.field.ComboBox',
xtype: 'combocheckbox',
fieldLabel: 'Status',
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="checkbox" {checked} />', '{text}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: ['text', 'value', {
name: 'checked',
defaultValue: ''
}],
data: [{
text: "All Statuses"
}, {
text: "Not Started"
}, {
text: "In Progress"
}, {
text: "Completed"
}, {
text: "Overdue"
}]
}),
queryMode: 'local',
listeners: {
select: function (combo, rec) {
rec.set('checked', 'checked');
},
beforedeselect: function (combo, rec) {
rec.set('checked', '');
}
}
});
Ext.define('GridStore', {
extend: 'Ext.data.Store',
alias: 'store.gridstore',
autoLoad: true,
fields: [{
name: 'issue',
mapping: 'issuetype',
convert: function (v) {
return v.toLowerCase();
}
}],
proxy: {
type: 'ajax',
url: 'task.json',
reader: {
type: 'json',
rootProperty: 'task'
}
}
});
Ext.create({
xtype: 'grid',
renderTo: Ext.getBody(),
title: 'Demo Grid',
store: {
type: 'gridstore'
},
height: 400,
width: '100%',
tbar: [{
xtype: 'combocheckbox',
listeners: {
select: function (combo, rec) {
var store = combo.up('grid').getStore();
store.clearFilter();
if (rec.get('text').toLowerCase() !== 'all statuses') {
store.filter('issue', rec.get('text').toLowerCase());
}
}
}
}],
columns: [{
text: 'Status',
width: 120,
dataIndex: 'issuetype',
renderer: function (value, metaData, record, rowIndex) {
let cls = 'notstarted';
switch (value.toLowerCase()) {
case 'in progress':
cls = 'inprocess';
break;
case 'completed':
cls = 'completed';
break;
case 'overdue':
cls = 'overdue';
break;
}
return `<span class="issuetype ${cls}">${value}</span>`;
}
}, {
text: 'Summary',
flex: 1,
dataIndex: 'summary'
}],
selModel: {
selType: 'checkboxmodel',
mode:'SIMPLE'
}
})
}
});

How to add a Release filter on the PortfolioItem/Feature object

Using AppSDK 2.0, how can I see the "Release" field in the PortfolioItem/Feature when I create a store?

Release needs to be among the fetched fields in WsapiDataStore:
fetch: ['FormattedID','Name','UserStories','Release']
But then in a Rally.data.custom.Store, to account for Features that are not assigned to a release, this condition is used:
Release: (release && release.Name) || 'None'
Here is the code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'PortfolioItem/Feature',
fetch: ['FormattedID','Name','UserStories','Release'],
pageSize: 100,
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_createGrid: function(features) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: features,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'Release', dataIndex: 'Release'
},
{
text: 'Story Count', dataIndex: 'StoryCount'
},
{
text: 'User Stories', dataIndex: 'UserStories',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(userstory){
html.push('' + userstory.FormattedID + '')
});
return html.join(', ');
}
}
]
});
},
_onDataLoaded: function(store, data){
var features = [];
var pendingstories = data.length;
//debugger;
Ext.Array.each(data, function(feature) {
var release = feature.get('Release');
var f = {
FormattedID: feature.get('FormattedID'),
Name: feature.get('Name'),
Release: (release && release.Name) || 'None',
_ref: feature.get("_ref"),
StoryCount: feature.get('UserStories').Count,
UserStories: []
};
var stories = feature.getCollection('UserStories');
stories.load({
fetch: ['FormattedID'],
callback: function(records, operation, success){
Ext.Array.each(records, function(story){
var number = story.get('DirectChildrenCount');
if (number == 0) {
f.UserStories.push({_ref: story.get('_ref'),
FormattedID: story.get('FormattedID')
});}
}, this);
--pendingstories;
if (pendingstories === 0) {
this._createGrid(features);
}
},
scope: this
});
features.push(f);
}, this);
}
});

Sencha Touch 2: How to show a List in a Navigation View?

I am trying to create a list on the fly and then show it dynamically in a navigation view but when I try and Do this, I get no errors and the list doesnt show. I was wondering how one can show a list from within a navigation view.
Ext.define('MyApp.view.Navigation', {
extend: 'Ext.navigation.View',
id: 'NavView',
xtype: 'navigationcard',
config: {
title: 'Schedule',
iconCls: 'settings',
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
xtype: 'mainview'
}
]
}
});
Ext.define('MyApp.view.Main', {
extend: 'Ext.TabPanel',
xtype: ['mainview','widget.mainview'],
config: {
title:'MyApp',
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{ xtype: 'schedulecard' },
{ xtype: 'settingscard' }
]
}
});
var scheduleStore = Ext.create('Ext.data.Store', {
storeId: 'schedulestore',
fields: ['scheduleId', 'templateName', 'startDate', 'times'],
sorters: 'day',
grouper: {
groupFn: function (record) {
var startDate = $.datepicker.formatDate('DD, MM dd', new Date(record.get('startDate')));
return startDate;
},
sortProperty: 'startDate',
}
}); // create()
Ext.define('MyApp.view.Schedule', {
extend: 'Ext.List',
xtype: 'schedulecard',
grouped: true,
config: {
title: 'Schedule',
iconCls: 'time',
store: 'schedulestore',
grouped: true,
itemTpl: '<span style="font-weight:bold;">{templateName}</span><br/>{times}',
listeners: {
itemtap: function (list, index, item, e) {
var self = Ext.getCmp('NavView');
var listRecord = list.getStore().getAt(index);
var scheduleId = listRecord.get('scheduleId');
var scheduleItem = GetScheduleItemById(scheduleId);
var button = Ext.create('Ext.Button', {
iconCls: 'compose',
text:'Forms',
iconMask: true,
handler: function () {
var self = Ext.getCmp('NavView');
var cListStore = Ext.create('MyApp.view.ScheduleFormsList');
var panelForms = Ext.create('Ext.Panel', {
id: 'panelForms',
items: [{ xtype: 'schedulecard' }]
});
var newView = {
title: scheduleItem.AppointmentType.Name,
id: 'ScheduleItemDetailForms',
items: [cListStore]
};
self.push(newView);
}
});
var panelScheduleDetails = Ext.create('Ext.Panel', {
id: 'panel',
html: '<div style="margin:10px;"><span style="font-weight:bold;">' + timesTxt + '</span></div><hr/><div style="float:left;margin:10px;clear:both;">' + locationtxt + '</div><div style="float:left;margin:10px;">' + googleMap + '</div>'
});
var scheduleDetailsContainer = Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'panel',
flex: 1,
items: [button]
},
{
xtype: 'panel',
flex: 2,
items: [panelScheduleDetails]
}
]
});
var newView = {
title: scheduleItem.AppointmentType.Name,
id: 'ScheduleItemDetailTabs',
items: [scheduleDetailsContainer]
};
self.push(newView);
}
}
}
});

Try adding the xtype of list in the main
Main.js
Ext.define('MyApp.view.Main',{
extend:'Ext.TabPanel',
xtype:'mainView',
id:'idMain',
config:{
tabBar:{
docked:'bottom',
hidden:true
},
items:[
{ xtype: 'schedulecard' }
]
}
});
Schedule.js
Ext.define("MyApp.view.Schedule", {
extend: "Ext.Container",
xtype: 'schedulecard',
config: {
title: 'Schedule',
iconCls: 'time',
layout:'fit',
items: [
{
xtype: 'navigationview',
id:'idScheduleListNavView',
items: [
{
xtype:'list',
onItemDisclosure:true,
loadingText: "Searching ...",
emptyText: "<div class=\"empty-text\">No Places Found.</div>",
id:'idSearchNavList',
store: 'schedulestore',
itemTpl: '<span style="font-weight:bold;">{templateName}</span><br/>{times}',
},
],
}
]
}
});
ScheduleController.js
In your controller create the new view and push it
Ext.define('MyApp.controller.ScheduleController',{
extend:'Ext.app.Controller',
config:{
refs:{
idScheduleList:'schedulecard',
navScheduleList:'#idScheduleListNavView',
},
control:{
'#idScheduleListNavView' : {itemtap:'showScheduleDetails'},
}
},
showScheduleDetails : function(){
var navScheduleList = this.getNavScheduleList();
navScheduleList.push(newView);
}
});

Extjs - Toolbar button menu dropdown with submenus. It's possible?

I've already done a toolbar with buttons that have a dropdown menu but I need more submenu levels. It's possible to do that? Example:
toolbarbutton ->
menu 1 lv 1
menu 2 lv 1
menu 3 lv 1->
submenu 1 lv 2
submenu 2 lv 2
menu 4 lv 1
and so on...

Have a look at this example! You can achieve using the Ext.menu.Menu class.
Here is an Example:
{
text: 'Main Menu',
menu: {
xtype: 'menu',
items: [{
text: 'Menu One',
iconCls: 'edit'
}, {
text: 'Menu Two',
menu: {
xtype: 'menu',
items: [{
text: 'Next Level'
},{
text: 'Next Level'
},{
text: 'Next Level'
}]
}
}, {
text: 'Menu Three',
scale: 'small'
}, {
text: 'Menu Four',
scale: 'small'
}]
}
}

Yes it is possible.
This menu is created dynamically with ExtJs, the data is loaded from Json.
See my demo with the code.
Demo Online:
https://fiddle.sencha.com/#view/editor&fiddle/2vcq
Json loaded:
https://api.myjson.com/bins/1d9tdd
Code ExtJs:
//Description: ExtJs - Create a dynamical menu from JSON
//Autor: Ronny Morán <ronney41#gmail.com>
Ext.application({
name : 'Fiddle',
launch : function() {
var formPanelFMBtn = Ext.create('Ext.form.Panel', {
bodyPadding: 2,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 85,
msgTarget: 'side'
},
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
]
}
]
});
var win = Ext.create('Ext.window.Window', {
title: 'EXTJS DYNAMICAL MENU FROM JSON',
modal: true,
width: 680,
closable: true,
layout: 'fit',
items: [formPanelFMBtn]
}).show();
//Consuming JSON from URL using method GET
Ext.Ajax.request({
url: 'https://api.myjson.com/bins/1d9tdd',
method: 'get',
timeout: 400000,
headers: { 'Content-Type': 'application/json' },
//params : Ext.JSON.encode(dataJsonRequest),
success: function(conn, response, options, eOpts) {
var result = Ext.JSON.decode(conn.responseText);
//passing JSON data in 'result'
viewMenuDinamical(formPanelFMBtn,result);
},
failure: function(conn, response, options, eOpts) {
//Ext.Msg.alert(titleAlerta,msgErrorGetFin);
}
});
}
});
//Generate dynamical menu with data from JSON
//Params: formPanelFMBtn - > Panel
// result - > Json data
function viewMenuDinamical(formPanelFMBtn,result){
var resultFinTarea = result;
var arrayCategoriaTareas = resultFinTarea.categoriaTareas;
var containerFinTarea = Ext.create('Ext.form.FieldSet', {
xtype: 'fieldset',
title: 'Menu:',
margins:'0 0 5 0',
flex:1,
layout: 'anchor',
//autoHeight: true,
autoScroll: true,
height: 200,
align: 'stretch',
items: [
]
});
var arrayMenu1 = [];
//LEVEL 1
for(var i = 0; i < arrayCategoriaTareas.length; i++)
{
var categoriaPadre = arrayCategoriaTareas[i];
var nombrePadre = categoriaPadre.nombreCategoria;
var hijosPadre = categoriaPadre.hijosCategoria;
var arrayMenu2 = [];
//LEVEL 2
for(var j = 0; j<hijosPadre.length; j++)
{
var categoriaHijo = hijosPadre[j];
var nombreHijo = categoriaHijo.nombreHijo;
var listaTareas = categoriaHijo.listaTareas;
var arrayMenu3 = [];
//LEVEL 3
for(var k = 0; k < listaTareas.length; k++)
{
var tarea = listaTareas[k];
var nombreTarea = tarea.nombreTarea;
var objFinLTres =
{
text: nombreTarea,
handler: function () {
alert("CLICK XD");
}
};
arrayMenu3.push(objFinLTres);
}
var menuLevel3 = Ext.create('Ext.menu.Menu', {
items: arrayMenu3
});
var objFinLDos;
if(arrayMenu3.length > 0)
{
objFinLDos = {
text: nombreHijo,
menu:menuLevel3
};
}
else
{
//without menu parameter If don't have children
objFinLDos = {
text: nombreHijo
};
}
arrayMenu2.push(objFinLDos);
}
var menuLevel2 = Ext.create('Ext.menu.Menu', {
items: arrayMenu2
});
var objFinLUno;
if(arrayMenu2.length > 0)
{
objFinLUno = {
text: nombrePadre,
menu:menuLevel2
};
}
else
{
//without menu parameter If don't have children
objFinLUno = {
text: nombrePadre
};
}
arrayMenu1.push(objFinLUno);
}
var mymenu = new Ext.menu.Menu({
items: arrayMenu1
});
containerFinTarea.add({
xtype: 'splitbutton',
text: 'Example xD',
menu: mymenu
});
formPanelFMBtn.add(containerFinTarea);
}