For some time I have a problem with my Shopware plugin. I extended article listWindow, added a column with checkbox. When customer clicks on checkbox I need to get article number that is in another column.
The way I first did it seems unreliable because it depends on position of a columns that can change.
//{block name="backend/article_list/view/main/grid"}
//{$smarty.block.parent}
//{namespace name=backend/article_list/main}
Ext.define('Shopware.apps.ArticleList.view.main.etsy_attribute.Grid', {
override: 'Shopware.apps.ArticleList.view.main.Grid',
...
getToolbar: function () {
var me = this, buttons;
buttons = me.callParent();
me.equaliseEtsyBtn = Ext.create('Ext.button.Button', {
text: 'Etsy equalise',
iconCls: 'sprite-drive-upload',
onClick: function () {
var i,
recPerPage = me.items.items[0].all.elements,
for (i = 0; i < recPerPage.length; i++) {
var productNumber = recPerPage[i].children[2].innerText;
if( recPerPage[i].children[numOfChildren].children[0].children[0].checked === true) {
Ext.Ajax.request({
method: 'POST',
url: '{url controller="someController" action="someAction"}',
params: Object.assign({
productNumber: productNumber
}),
success: function (res) {
//var parsed = JSON.parse(res.responseText);
},
failure: function () {
}
});
} else {
});
}
}
}
});
buttons.add(me.equaliseEtsyBtn);
return buttons;
},
})
What is bad here is this:
recPerPage[i].children[numOfChildren].children[0].children[0].checked === true
And similar lines. How to get value I need in some smarter and more accurate way?
Alse tried with .down and .up
Please give me some direction!
Related
ExtJs is a new world for me. I hope I can get the problem explained very well.
I have a grid with different editor columns. If I change one and save it, I have to change the output.
I do it with
e.row.cells[e.colIdx].childNodes[0].innerText = '{s name=column/express/yes}JA{/s}';
e.row.cells[e.colIdx].classList.add("warning");
If I change 2 different fields at the same time, e.colIdx does not fit anymore to the right column.
Is there a getter or anything else to get the column of a special grid column ?
Here is the complete code
onSavePosition: function(editor, e, store, options) {
var me = this,positionStore;
if (((e.newValues.md_express != e.originalValues.md_express) && e.record.internalId > 0)
|| e.newValues.md_supplier != e.originalValues.md_supplier) {
var customCallback = function (position, success) {
Ext.Ajax.request({
method: 'POST',
url: '{url controller=AttributeData action=saveData}',
params: {
_foreignKey: e.record.internalId,
_table: 's_order_details_attributes',
__attribute_md_express: Number(e.newValues.md_express),
__attribute_md_supplier: e.newValues.md_supplier
},
success:function(response){
var t=this;
me.getOrderList().store.load();
var selectedRowIndex=e.grid.getSelectionModel().getCurrentPosition().row;
var selectedRowRecord=e.grid.getStore().getAt(selectedRowIndex);
selectedRowRecord.set('md_express',e.newValues.md_express);
selectedRowRecord.set('md_supplier',e.newValues.md_supplier);
selectedRowRecord.commit();
debugger;
if((e.newValues.md_express != e.originalValues.md_express)) {
if (e.newValues.md_express == true) {
e.row.cells[e.colIdx].childNodes[0].innerText = '{s name=column/express/yes}JA{/s}';
e.row.cells[e.colIdx].classList.add("warning");
} else {
e.row.cells[e.colIdx].childNodes[0].innerText = '{s name=column/express/no}NEIN{/s}';
e.row.cells[e.colIdx].classList.remove("warning");
}
}
}
});
};
options.callback = customCallback;
}
me.callParent([editor, e, store, options]);
}
my solution is
var colIdx = me.getColumnIndex(editor.grid,'md_express');
getColumnIndex: function(grid, dataIndex) {
gridDataIndices = Ext.Array.pluck(grid.columns, 'dataIndex');
return Ext.Array.indexOf(gridDataIndices, dataIndex);
}
this sends back the column index of the given column in my grid.
Found here
how to find column index using dataIndex Extjs 4
I am adding a text "Please scroll down" to the Terms and Conditions web page and the text should hide after reaching the bottom of the page. I created a container that shows the text on the entire page under View (Sencha Architect) but not sure how to hide it after scrolling to the bottom. I am trying to create a controller action under Controllers but it's not working. Attached is the code for TermsConditions controller. ItemID of the container containing text is scrollContainer
onAgreeClick: function(button, e, eOpts) {
var store = Ext.data.StoreManager.lookup('UserObjectStore');
var match = store.first(),
showAnnouncements = match.get('announcementPageToVisit');
if (showAnnouncements) {
button = this.getBtnAnnouncements();
} else {
button = this.getBtnCustomerSearch();
}
this.simulateHeaderButtonClick(button);
Ext.Ajax.request({
url: '../abc/services/users/saveUser',
method: 'GET',
headers: { 'Content-Type': 'application/json' },
success: function (response, action) {
},
failure: function (response, action) {
}
});
},
onDisagreeClick: function(button, e, eOpts) {
Ext.Msg.confirm('','You must agree to the Terms and Conditions in order to continue. Press YES to go back or NO to exit.',
function(answer) {
if (answer === "no") {
var h = abc.app.getController('HeaderButton');
h.terminateApp('ok', null, null);
}
}
);
},
BackToTaC: function(button, e, eOpts) {
this.getTermsBtnContainer().hide();
this.getTermsBackContainer().show();
this.getScrollContainer().hide();
this.getBtnAnnouncements().toggle();
this.getBody().getLayout().setActiveItem(6);
},
var me = this;
dataview.getEl().on('scroll', function(e, t) {
if(t.scrollHeight - t.scrollTop - t.clientHeight === 0) {
}
});// I already tried to hide under this but it doesn't work
onTermsBeforeShow: function(component, eOpts) {
var me = this;
var termsView = component.down('dataview');
var termsStore = termsView.getStore();
termsStore.getProxy().actionMethods = {create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'};
termsStore.load();
},
I have had similar requirements for Extjs Panel and I handled them by getting the height of the grid and comparing the height with the current Y Position of the grid.
In the panel page , I had
var toBeAbsoluted = this.getHeight() / 95 * 100; // approximation 95% seemed optimum in my case
if(this.getY() >= (this.getHeight() - toBeAbsoluted ))
buttonToHide.hide()
How do I remove a newly added row from a gridpanel? The gridpanel is bound to a store.
I use:
store.remove(record);
store.sync();
It works fine on existing records in the grid, the record is removed from the grid directly, but when I add a record and want to remove it right away, it isn't 'removed' form the grid.
The api is called, so the record is 'removed from the database' and the record is indeed gone when I do e.g. a browser refresh.
Does anyone knows how this works? Thanks in advance.
Store configurations
Ext.define('Iziezie.store.animal.doggywood.animal', {
extend: 'Iziezie.store.animal.animal',
model: 'Iziezie.model.animal.doggywood.animal',
proxy: {
type: 'baseProxy',
api: {
create: '../php/api/doggywood_animals.php?request=create',
read: '../php/api/doggywood_animals.php?request=read',
update: '../php/api/doggywood_animals.php?request=update',
destroy: '../php/api/doggywood_animals.php?request=destroy'
}
}
});
New records is added by form:
var store = gridpanel.getStore();
var model = Ext.ModelMgr.getModel(store.model);
var record = model.create();
store.insert(0, record);
...
frm.loadRecord(record);
On form submit
frm.updateRecord();
var record = frm.getRecord();
record.save();
On remove:
var sm = gridpanel.getSelectionModel();
var record = sm.getLastSelected();
var store = gridpanel.getStore();
store.remove(record);
store.sync();
To force a visual refresh on the grid, you can just call
myGridPanel.getView().refresh();
But this shouldn't be required, the grid should just show whatever is in your store. Can you post a full code sample of what you are doing?
try this to create a new record to grid panel using row editing:
createRecord: function() {
var model = Ext.ModelMgr.getModel('EKOJS.model.m_yourmodel');
var r = Ext.ModelManager.create({
id: '',
text: ''
}, model);
this.getYourgridaliasview().getStore().insert(0, r);
this.getYourgridaliasview().rowEditing.startEdit(0, 0);
},
and to remove the selected record in your grid panel :
deleteRecord: function(dataview, selections) {
var getstore = this.getYourgridaliasview().getStore();
var selection = this.getYourgridaliasview().getSelectionModel().getSelection()[
0];
if (selection) {
Ext.Msg.confirm('Confirmation',
'Are you sure to delete this data: id = "' + selection.data
.id + '"?', function(btn) {
if (btn == 'yes') {
getstore.remove(selection);
getstore.sync();
}
});
}
},
and, the important thing always reload your store after creating record like this :
Ext.Ajax.request({
method: 'POST',
url: '../php/api/doggywood_animals.php?request=create',
params: {
data: jsonData
},
success: function(response) {
e.store.reload({
callback: function() {
var newRecordIndex = e.store.findBy(
function(record, id) {
if (record.get('id') === e.record
.data.id) {
return true;
}
return false;
});
/* me.grid.getView().select(recordIndex); */
me.grid.getSelectionModel().select(
newRecordIndex);
}
});
}
});
The listener of after edit in rowediting plugin i use is like this below :
'afteredit': function(editor, e) {
var me = this;
if ((/^\s*$/).test(e.record.data.id)) {
Ext.Msg.alert('Peringatan', 'Kolom "id" tidak boleh kosong.');
return false;
}
/* e.store.sync();
return true; */
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: '../php/api/doggywood_animals.php?request=create',
params: {
data: jsonData
},
success: function(response) {
e.store.reload({
callback: function() {
var newRecordIndex = e.store.findBy(
function(record, id) {
if (record.get('id') ===
e.record.data.id
) {
return true;
}
return false;
});
/* me.grid.getView().select(recordIndex); */
me.grid.getSelectionModel().select(
newRecordIndex);
}
});
}
});
return true;
}
May be a little help for you.
Below is a renderer for an Ext.grid.Panel column. Suppose contactStore has 2,000 values in it and all I care about is the name of the record based on the id (value parameter in this case), and my grid only has 25 rows/records in it for the page I'm on. How can I dynamically get the store so that I grab the relevant associated records (based on the foreign key) of the id of my grid column, rather than loading all 2,000 records? Is there a way to load the store and then in the callback, somehow have this "renderer" function display the values after the callback succeeded?
columns: [{
...
}, {
header: 'Contact Name',
flex: 1,
sortable: true,
dataIndex: 'contact_id',
renderer: function(value) {
var contactStore = Ext.StoreManager.lookup('Contacts');
return contactStore.getById(value).get('full_name');
}
}, {
You can adjust the collectData(records, startIndex) in the viewConfig for that:
Ext.create('Ext.grid.Panel', {
(...)
viewConfig: {
//this method needs to be adjusted
collectData: function(records, startIndex) {
var me = this;
//we can use a custom function for this
if (me.onBeforeCollectData) {
me.onBeforeCollectData(records);
}
var data = me.superclass.collectData.call(me, records, startIndex);
return data;
},
onBeforeCollectData: function(records) {
var newExtraParams = [];
var oldExtraParams;
var needToLoadStore = false;
var contactStore = Ext.StoreManager.lookup('Contacts');
if (contactStore) {
oldExtraParams = contactStore.oldExtraParams;
} else {
//don't use autLoad: true, this will be a local store
contactStore = Ext.create('Ext.data.Store', {
storeId:'Contacts',
(...)
});
needToLoadStore = true;
}
for (var x in records) {
//contact_id is read out here
var param = records[x].get('contact_id');
if (param) {
if (needToLoadStore == false && Ext.Array.contains(oldExtraParams, param) == false) {
needToLoadStore = true;
}
newExtraParams.push(param);
}
}
if (needToLoadStore == true) {
//we use this to load the store data => because of async: false property
Ext.Ajax.request({
scope: this,
//this is for synchronous calls
async: false,
url: (...),
method: (...),
params: newExtraParams,
success: function (res, opt) {
var responseObj = Ext.decode(res.responseText, false);
contactStore.loadData(responseObj); //or deeper in the responseObj if needed
contactStore.oldExtraParams = newExtraParams;
}
});
}
}
}
});
Currently i am facing the following problem.
I am displaying after successful call of this ajax request.
function callDesignWindow(){
var serviceType = $("#serviceType").val();
alert(serviceType);
var ptId = $("#pt_id").val();
alert(ptId);
getAjaxPage({
url : "/ajax/NewEform/design.do?serviceType=" + serviceType +"&ptId =" + ptId,
successCallback: function (data) {
showDesignWindow(data);
}
});
searchVisible = true;
}
function showDesignWindow(htmlData){
alert(" In the show Design Window");
var designWindow = new Ext.Window({
title: "E-Form Design Phase",
width:650,
autoHeight: true,
id:'designWindow',
html: htmlData,
closable: false,
y: 150,
listeners: {
beforeclose: function () {
searchVisible = false;
}
},
buttons: [
{
text: 'Add Control', handler: function() {
saveFormControl();
}
},
{
text:'Customize', handler: function() {
designWindow.hide();
callCustomWindow();
}
}
]
});
designWindow.show(this);
}
function saveFormControl(){
alert(" add control button clicked");
if (!validateEformData()) return false;
formname= $("#formname").val();
alert(formname);
controlType= $("#controlType").val();
alert(controlType);
label= $("#labelname").val();
alert(label);
dataType= $("#dataType").val();
required= $("#required").val();
serviceType= $("#serviceType").val();
ptId = $("#ptId").val();
if(controlType == 3){
var itemList = [];
$("#selectedItemLists option").each(function(){
itemList.push($(this).val());
});
}
data = "eform_name=" + formname + "&control=" + controlType + "&serviceType=" + serviceType +"&ptId=" + ptId +"&labelName=" +label+ "&dataType=" +dataType+"&required="+required+"&items="+itemList;
alert(data);
$.ajax( {
type : "POST",
url : "/ajax/eformDetails/save.do",
data : data,
cache : false,
dataType : "text/html",
timeout: 40000,
error: function (xhr, err)
{
resolveAjaxError(xhr, err);
},
success : function(data) {
// Ext.getCmp('designWindow').close();
// showDesignWindow(data);
}
});
}
Now on success call of the ajax call ("/ajax/eformDetails/save.do") i want to update the designWindow and reset the values.
please help me in this.
If you want to be able to to manipulate our designWindow after you have already created it, you will need to either maintain a reference to it somewhere, or take advantage of the Ext.getCmp method (I would recommend the latter. For example, in your success function:
success: function () {
var myWindow = Ext.getCmp('designWindow');
//do whatever changes you would like to your window
}