Develop Reference

Shopware backend new article tab, key sent, value not

I have a task to create simple plugin for shopware to extend article with new tab and few fields in it. I did it some way, code is below, but i have a big problem:
after entering data for article on click on save button action is triggered, ajax call made, in networks section in browser I can see fields key but there is no value.
Request params look like this:
name: bla bla
myfield: <--- problem
category: some category etc..
Things worked well when fields was in original tabs.
app.js:
// {block name="backend/article/application"}
// {$smarty.block.parent}
// {include file="backend/article/controller/controller.js"}
// {/block}
model:
// {block name="backend/article/model/article/fields"}
//{$smarty.block.parent}
{ name: 'madeby', type: 'string' },
{ name: 'columna', type: 'string' },
{ name: 'colona', type: 'string' },
{ name: 'blabla', type: 'string' },
// {/block}
and the main part window.js:
// {block name="backend/article/view/detail/window"}
// {$smarty.block.parent}
// {namespace name="backend/etsy_attribute/window"}
Ext.define('Shopware.apps.Article.view.detail.Window.etsy_connector.Window', {
override: 'Shopware.apps.Article.view.detail.Window',
/**
* Override creatMainTabPanel method and add your custom tab here.
* To extend the tab panel this function can be override.
*
* #return Ext.tab.Panel
*/
createMainTabPanel: function () {
var me = this, result;
result = me.callParent(arguments);
me.registerAdditionalTab({
title: 'Etsy Tab',
tabConfig: { disabled: false },
contentFn: function (article, stores, eOpts) {
eOpts.tab.add({
tab:
me.etsyTab = Ext.create('Ext.container.Container', {
region: 'center',
padding: 10,
title: 'Etsy Tab',
disabled: false,
name: 'additional-tab',
//cls: Ext.baseCSSPrefix + 'etsy-tab-container',
items: [
me.createEtsyPanel()
]
}),
xtype:
me.etsyTab,
config:
me.etsyTab
});
},
scope: me
});
//result.add(me.etsyTab);
return result;
},
createEtsyPanel: function () {
var me = this;
me.etsyFormPanel = Ext.create('Ext.form.Panel', {
name: 'etsy-panel',
bodyPadding: 10,
autoScroll: true,
defaults: {
labelWidth: 155
},
items: [
me.createEtsyFieldSet()
]
});
return me.detailContainer = Ext.create('Ext.container.Container', {
layout: 'fit',
name: 'main',
title: me.snippets.formTab,
items: [
me.etsyFormPanel
]
});
},
createEtsyFieldSet: function () {
//var me = this;
return Ext.create('Ext.form.FieldSet', {
layout: 'anchor',
cls: Ext.baseCSSPrefix + 'article-etsy-field-set',
defaults: {
labelWidth: 155,
anchor: '100%',
translatable: true,
xtype: 'textfield'
},
title: 'Etsy connection content',
items: [
{
xtype: 'textfield',
name: 'blabla',
height: 100,
fieldLabel: 'blabla'
},
{
xtype: 'textfield',
name: 'columna',
height: 100,
fieldLabel: 'columna'
},
{
xtype: 'textfield',
name: 'colona',
height: 100,
fieldLabel: 'colona'
},
{
xtype: 'textfield',
name: 'madeby',
height: 100,
fieldLabel: 'madeby'
}
]
});
}
});
// {/block}
My question is:
Why no value is sent in request for my added fields in new tab?
Thanks.

You need also add controller for handle your tab.
//{block name="backend/article/controller/detail" append}
Ext.define('Shopware.apps.Article.controller.detail.etsy_connector.Base', {
override: 'Shopware.apps.Article.controller.Detail',
onSaveArticle: function(win, article, options) {
var me = this;
me.callParent([win, article, options]);
console.log(me);
console.log(me.getMainWindow());
//You need to find your own form
console.log(me.getMainWindow().detailContainer);
console.log(me.getMainWindow().detailContainer.getForm().getValues());
var myVariables = me.getMainWindow().detailContainer.getForm().getValues();
//Or merge your data with article data
var params = Ext.merge({}, me.getMainWindow().detailForm.getForm().getValues(), myVariables);
//Send to your own controller to handle
Ext.Ajax.request({
method: 'POST',
url: '{url controller=EtsyConnector action=save}',
params: myVariables
});
}
});
//{/block}

Web service returning JSON but not rendering

I have a SharePoint web service that retrieves documents from a farm. The call is a successful 200 and when I open it I can validate the JSON fine.
However it is not rendering on the page. Instead throwing a:
SyntaxError: missing ; before statement[Learn More] getTopics:1:8
getTopics is part of the Visual studio wsp project which compiles, deploys, and successfully retrieves the data. Is there something I'm missing here?
Code
var title = 'List';
var gridHeight = 400;
var uniqueId = 'topics';
var url = '/_vti_bin/MetaDataDoc/MetaDoc.svc/getTopics/?folder=/general_documents/';
var dSort = 'modified';
var dSortOrder = 'DESC';
buildGrid(uniqueId,title,gridHeight,url,dSort,dSortOrder)
function buildGrid(divId, title, gridHeight, url, dSort, dSortOrder) {
Ext.define('gridModel', {
extend: 'Ext.data.Model',
fields: [
{ name: "name", mapping: "name", sortable: true, convert: Ext.util.Format.trim },
{ name: "upcase_name", mapping: "name", convert: Ext.util.Format.uppercase },
{ name: "upcase_desc", mapping: "para", convert: Ext.util.Format.uppercase },
{ name: "url", mapping: "url", sortable: true},
{ name: "modified", mapping: "date", sortable: true, type: "date", dateFormat: "n/j/Y g:i A" },
{ name: "type", mapping: "type", sortable: true },
{ name: "size", mapping: "size", sortable: true, type: 'int'},
{ name: "desc", mapping: "para" },
{ name: "doclist", mapping: "doclist", convert: nestedData },
{ name: "title", mapping: "title" }
]
});
function toggleDetails(btn, pressed) {
grid[divId].columns[1].renderer = pressed ? renderNameDetails : renderName;
grid[divId].columns[0].renderer = pressed ? renderTypeDetails : renderType;
grid[divId].getView().refresh();
}
var gridStore = Ext.create('Ext.data.Store', {
model: 'gridModel',
proxy: {
type: 'jsonp',
url: url,
reader: {
type: 'json',
record: 'doc',
root: 'doclist'
}
}
});
if (dSort) {
gridStore.sort(dSort, dSortOrder);
}
var searchField = new SearchField({ store: gridStore, width: 300 });
var toggleButton = new Ext.Button({
enableToggle: true,
border: true,
text: 'View Details',
toggleHandler: toggleDetails,
pressed: false
});
grid[divId] = Ext.create('Ext.grid.Panel', {
renderTo: divId,
store: gridStore,
enableColumnHide: false,
enableColumnMove : false,
height: gridHeight,
tbar: ['Filter: ', ' ', searchField, { xtype: 'tbfill' }, toggleButton],
columns: [
{text: 'Type', width: 50, dataIndex: 'type',renderer: renderType},
{text: 'Document Name', flex: 1, dataIndex: 'name', renderer: renderName},
{text: 'Modified', width: 90, dataIndex: 'modified', xtype:'datecolumn', format:'m/d/Y'}
]
});
var loadMask = new Ext.LoadMask(divId, {message: "Loading"});
gridStore.load();
}
getTopics from the web service
public content getTopics(string foldername)
{
content returnContent = new content();
returnContent = getDocs2(foldername);
return returnContent;
}

Add that missing semicolon here (line 8):
buildGrid(uniqueId,title,gridHeight,url,dSort,dSortOrder);

ExtJS 5: All stores are updated when changing a single store

I have created a tabpanel, with images as titles, and a custom component as html. Those custom components use stores, but I'm having an error when updating a single variable (status), all the variables change. Here I show the code:
SelectableButtons component:
Ext.require('Cat3.view.fsm.data.ButtonsStore');
/**
* Selectable button with image
*/
Ext.define('Cat3.view.fsm.components.SelectableButtons', {
extend: 'Ext.view.View',
cls: 'selectable-buttons',
alias: 'widget.selectable-buttons',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap button button-{status}">',
'<img src="resources/images/cards/{type}/{status}/{name}.png">',
'<img src="resources/images/icons/icon_mandatory.png" class="button-tick button-tick-{status}">',
'</div>',
'</tpl>'
],
// Set both to false if you want single select
multiSelect: true,
simpleSelect: true,
trackOver: false,
itemSelector: 'div.thumb-wrap',
listeners: {
select: function(ths, record, eOpts) {
record.set('status', 'active');
debugAmenaButtonStatus(this);
},
deselect: function(ths, record, eOpts) {
record.set('status', 'passive');
},
selectionchange: function(selection) {
this.refresh();
},
containerclick: function(ths, e, eOpts) {
return false; // Stops the deselection of items
}
},
initComponent: function() {
var store = Ext.create('Cat3.view.fsm.data.ButtonsStore');
this.setStore(store);
this.callParent(arguments);
}
});
debugAmenaButtonStatus = function(ref) {
ref.up().up().items.items.forEach(function(tab) { // Tab
console.log(tab.items.items[0].getStore().data.items[0].data.status); // Amena Button Status
});
};
SelectableButtonsCarousel component (Tab panel). It uses another store but it isn't related:
var cardsImagePath = 'resources/images/cards/';
var ImageModel = Ext.define('ImageModel2', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'type',
type: 'string'
}, {
name: 'status',
type: 'string'
}, ]
});
var store = Ext.create('Ext.data.Store', {
model: 'ImageModel2',
data: [{
name: 'amena',
type: 'operator',
}, {
name: 'movistar',
type: 'operator',
}, {
name: 'orange',
type: 'operator',
}, {
name: 'simyo',
type: 'operator',
}, {
name: 'yoigo',
type: 'operator',
}, {
name: 'vodafone',
type: 'operator',
}]
});
Ext.define('Cat3.view.fsm.components.SelectableButtonsCarousel', {
extend: 'Ext.tab.Panel',
xtype: 'basic-tabs',
cls: 'selectable-buttons-carousel',
alias: 'widget.selectable-buttons-carousel',
store: store,
resizeTabs: false,
defaults: {
bodyPadding: 10,
layout: 'fit'
},
require: [
'Cat3.view.fsm.components.SelectableButtons',
'Cat3.view.fsm.data.ButtonsStore'
],
titleTpl: function(info) {
return '<img src="resources/images/cards/operator/' + info.status + '/' + info.name + '.png">';
},
listeners: {
render: function(p) {
var tabpanel = this;
this.store.data.items.forEach(function(item, index) {
item.data.status = index === 0 ? 'active' : 'passive';
var buttons = new Cat3.view.fsm.components.SelectableButtons();
tabpanel.add(Ext.create('Ext.Panel', {
id: 'tab-' + index,
title: tabpanel.titleTpl(item.data),
items: [ buttons ],
cls: item.data.status,
info: item.data,
listeners: {
render: function(p) {
console.log('render');
}
}
}));
});
tabpanel.setActiveTab(0);
},
tabchange: function(tabPanel, newCard, oldCard, eOpts) {
newCard.info.status = 'active';
newCard.setTitle(this.titleTpl(newCard.info));
newCard.items.items[0].refresh();
if (oldCard) {
oldCard.info.status = 'passive';
oldCard.setTitle(this.titleTpl(oldCard.info));
}
}
}
});
SelectableButtons Store:
var ImageModel = Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'type', type: 'string'},
{name: 'status', type: 'string'},
]
});
Ext.define('Cat3.view.fsm.data.ButtonsStore', {
extend: 'Ext.data.Store',
model: 'ImageModel',
data: [
{name: 'amena', type: 'operator', status: 'passive'},
{name: 'movistar', type: 'operator', status: 'passive'},
{name: 'orange', type: 'operator', status: 'passive'},
{name: 'simyo', type: 'operator', status: 'passive'},
{name: 'yoigo', type: 'operator', status: 'passive'},
{name: 'vodafone', type: 'operator', status: 'passive'}
],
listeners: {
datachanged: function() {
console.log('store data changed');
}
}
});
All works fine, but when I select a button of SelectableButtons (one tab), the same button of each tab changes its status, and only the one selected of the active tab has to change. Any ideas why? I've checked each store is created separately and that each store has a different id.

Just an idea, for a better guess I'd need to see it working best at http://fiddle.sencha.com:
If "select one selects all", my first idea is that all buttons are just one button referred to from all places. One instance with different names.

Notice the line on your Cat3.view.fsm.components.SelectableButtons view:
initComponent: function() {
var store = Ext.create('Cat3.view.fsm.data.ButtonsStore');
...
}
You might wanna change it to
initComponent: function() {
var store = new Ext.create('Cat3.view.fsm.data.ButtonsStore');
...
}
This will create a new instance of Data Store for your view.

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);
}
});