Related
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}
Intro:
I need to call the backend controller to see if the user is admin. If the user is NOT admin, hide the toolbar in the application. Currently the var is successfully changing; However, it is changing after the view is already created causing the view to always have the toolbar visable.
Problem:
Need to check backend to see if user is in the admin group.
Need to return true if they are in admin group
MyCode:
var adminBool = false;
function CheckAdmin() {
debugger;
var a;
Direct.Report.IsAdmin(this.results, a);
debugger;
};
function results(result, constructor, c, d, e, f, g, h) {
debugger;
this.adminBool= result.adminUser; //returns bool
}
Ext.define('Ext.View.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
init: this.CheckAdmin(),
data: {
addNew: true,
update: true,
gridData: null,
isAdmin: this.adminBool
}
});
Synopsis:
Call the backend controller for admin status
Return bool
Update viewModel with bool respectively
ViewModel property,'isAdmin', will bind with hidden property to hide unwanted actions for non admins
UPDATE:
Basically I need a way to delay "isAdmin: this.adminBool" check to after the backend call is finished.
As you are using ViewModel.
So you can use set() method to update your viewmodel field.
I have created an sencha fiddle demo using viewmodel. You can check, how it is working in fiddle. In this fiddle I have not used any API, it just example regarding of ViewModel. Hope this will help you to solve your problem or achieve your requirement.
//ViewModel
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
data: {
isAdmin: true
}
});
//Panel
Ext.create('Ext.panel.Panel', {
title: 'ViewModel example',
width: '100%',
renderTo: Ext.getBody(),
viewModel: 'AdministrationViewModel',
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 10
},
defaults: {
margin: 10
},
items: [{
xtype: 'combo',
height: 40,
fieldLabel: 'Choose Admin or user',
emptyText: 'Choose Admin or user',
labelAlign: 'top',
store: {
fields: ['name', 'value'],
data: [{
"value": true,
"name": "Admin"
}, {
"value": false,
"name": "User"
}]
},
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners: {
select: function (combo, record) {
var viewModel = combo.up('panel').getViewModel(),
isAdmin = record.get('value');
//If selected value is {Admin} then we will show toolbar otherwise in case of {User} hide
viewModel.set('isAdmin', !isAdmin);
}
}
}, {
xtype: 'toolbar',
width: '100%',
height: 50,
padding: 10,
bind: {
hidden: '{isAdmin}'
},
items: [{
// xtype: 'button', // default for Toolbars
text: 'Admin',
}, {
xtype: 'splitbutton',
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{
xtype: 'tbspacer'
}, // same as ' ' to create Ext.toolbar.Spacer
'text 2', {
xtype: 'tbspacer',
width: 50
}, // add a 50px space
'text 3'
]
}]
});
I am using ExtJs to create a combobox.
Here is my code:
Ext.define('Form.FormTypeDialog', {
extend : 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction : null,
modal: true,
statics : {
show : function(formId, callback) {
Ext.create(Form.FormTypeDialog", {
formId : formId,
callbackFunction : callback
}).show();
}
},
constructor : function(config) {
var me = this;
Ext.apply(this, {
buttons : [
{
text:"#{msgs.form_create_dialog_button_cancel}",
cls : 'secondaryBtn',
handler: function() {
me.close();
}
},
{
text:"#{msgs.form_create_dialog_button_next}",
handler: function() {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent:function() {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var formTypeStore = Mystore.Store.createRestStore({
url : getRelativeUrl('/rest/form/formTypes'),
root: 'objects',
fields: ['name','value']
});
this.form = new Ext.form.Panel({
style:'padding:15px;background-color:#fff' ,
border:false,
bodyBorder:false,
items:[
new Ext.form.Label({
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
new Ext.form.ComboBox({
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable:false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
I am creating this window on a xhtml page on a button click using :
Form.FormTypeDialog.show(null, showFormWindowCallBack);
It works fine and combo box is displayed and I can select value.
But if I open and close it 4 times, then in next show it shows the values but It do not allow me to select the last two value. I can only select first value.
Please suggest.
Note: I have tried copying and executing this code in forms of other pages of my application. But behavior is same in all cases.
This combobox is on a Ext.Window.
EDIT:
JSON RESPONSE FROM Rest:
{"attributes":null,"complete":true,"count":3,"errors":null,"failure":false,"metaData":null,"objects":[{"name":"Application
Provisioning Policy Form","value":"Application"},{"name":"Role
Provisioning Policy Form","value":"Role"},{"name":"Workflow
Form","value":"Workflow"}],"requestID":null,"retry":false,"retryWait":0,"status":"success","success":true,"warnings":null}
I have re-created this code, I had some errors showing in Firefox using your code directly so I've changed some things.
Running the code below and calling Ext.create("Form.FormTypeDialog", {}).show(); in the console window, then closing the window and repeating does not replicate this issue. Could you try using the code I have and see if you still have the same problem.
Ext.application({
name: 'HelloExt',
launch: function () {
Ext.define('Form.FormTypeDialog', {
extend: 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction: null,
modal: true,
constructor: function (config) {
var me = this;
Ext.apply(this, {
buttons: [
{
text: "#{msgs.form_create_dialog_button_cancel}",
cls: 'secondaryBtn',
handler: function () {
me.close();
}
},
{
text: "#{msgs.form_create_dialog_button_next}",
handler: function () {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent: function () {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var myData = [
["Application Provisioning Policy Form", "Application"],
["Role Provisioning Policy Form", "Role"],
["Workflow Form", "Workflow"],
];
var formTypeStore = Ext.create("Ext.data.ArrayStore", {
fields: [
'name',
'value'
],
data: myData,
storeId: "myStore"
});
this.form = Ext.create("Ext.form.Panel", {
style: 'padding:15px;background-color:#fff',
border: false,
bodyBorder: false,
items: [
Ext.create("Ext.form.Label", {
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
Ext.create("Ext.form.ComboBox", {
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable: false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
Ext.create("Form.FormTypeDialog", {}).show();
}
});
}
});
You can also play around with this code using / forking from this Fiddle
It is not clear what your problem is.
I use remote combo follows:
Ext.define('ComboRemote', {
extend: 'Ext.form.ComboBox',
xtype: 'ComboRemote',
emptyText: 'empty',
width: 75,
displayField: 'name',
valueField: 'id',
store: {
model: 'ComboModel',
proxy: {
type: 'rest',
url: '/serv/Res',
extraParams: {
query: ''
},
reader: {
root: "result", type: 'json'
}
},
autoLoad: true,
},
queryMode: 'remote',
pageSize: false,
lastQuery: '',
minChars: 0});
Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: [
'id',
'name'
]});
I hope to help
Try these possible solutions
1. Make AutoLoad property for store as true.
2. Add delay of some ms
I'm new to ExtJS and have the following problem: I have one class LoginWindow, that implements a FormPanel:
Ext.define('WebDesktop.LoginWindow', {
extend: 'Ext.window.Window',
title: Translator.get("login_window:Anmeldung"),
layout: 'fit',
closable: false,
resizable: false,
constructor: function() {
this.callParent();
},
initComponent: function () {
var me = this;
me.loginPanel = new WebDesktop.LoginPanel(me);
me.items = [
me.loginPanel
],
me.callParent();
},
});
Ext.define('WebDesktop.LoginPanel', {
extend: 'Ext.form.Panel',
header: false,
bodyPadding: 5,
reset: true,
waitMsgTarget: true,
url: Routing.generate('_route_core_login'),
items: [{
xtype: 'textfield',
fieldLabel: Translator.get("login_window:Benutzername"),
name: '_username',
width: 300,
},
{
xtype: 'textfield',
fieldLabel: Translator.get("login_window:Passwort"),
name: '_password',
inputType: 'password',
width: 300,
}],
buttons: [{
text: Translator.get("login_window:Anmelden"),
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
form.submit({
success: /* Call a function that is defined in main application class */,
failure: function(form, action) {
Ext.Msg.show({
title: Translator.get("login_window:Benutzeranmeldung"),
msg: action.result ? action.result.message : 'No response',
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
form.reset();
}
});
}
}
}],
});
Now in my main application class I create an instance of the LoginWindow and show it to the user. Also in this main class is a function defined, that should be called when the form of the login window has successfully been submitted. But I don't know how to put in a reference to that function. I tried to pass a reference of the caller class to the called class and save it there, but that did not work. As you can see I'm not working with the MVC architecture, I know it's not best practice...
me.loginPanel = new WebDesktop.LoginPanel();
me.loginPanel.referenceToParentWindow = me;
is this what you are looking for? I am very confused.
I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!
In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}
I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.