I'm having difficulties retrieving my input values through Extjs6's references. There doesn't seem to be a clear cut answer and google is polluted with answers that seem distinct to many different Extjs versions.
I have a window which contains a textfield and a save button, from the textfield I need to retrieve the user's input and pass it along to my ajax call.
My code:
window.updatePassword = function(button) {
var win = new Ext.Window({
referenceHolder: true,
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: "newPassword",
reference: 'newPassword',
inputType: 'password'
}],
}],
buttons: [{
text: 'save',
handler: function (btn) {
Ext.Ajax.request({
url: '../../Password_updatePassword.action',
params : {
newPassword: win.newPassword
},
scope: this,
disableCaching: true
});
},
scope: this
}]
});
win.show(this);
};
The things I've tried so far:
this.lookupReference('newPassword')
win.values
win.getValues()
win.newPassword
Ext.getCmp('newPassword')
Any advice would be appreciated.
this.lookupReference('newPassword') - This refers to current object
and handler dont have any component to lookup.
win.values - doesnt make any sense unless you have created a config
in win.
win.getValues() - again doesnt make any sense unless you have create a method in win.
win.newPassword - again same.
Ext.getCmp('newPassword') - getCmp works with id, not with reference.
To get the reference of password field you can lookup on win object,
win.lookupReference('newPassword');
To get the value you have to use getValue() method.
win.lookupReference('newPassword').getValue();
Related
I am new to the Tabulator plug-in and I am attempting to copy data from one table to another using the Tabulator copyToClipboard method but with no success.
In my application I have created eleven <div> elements (one for the [Crew Leader] and one each for up to ten [Crew Members]) to serve as containers for the Tabulator tables to be instantiated. I am hoping to copy data from the [Crew Leader] table and paste it into each of the affected [Crew Member] tables thus mitigating data re-entry. This sequence of copy/paste events is triggered by the click event bound to a <button> in the header of the [Crew Leader] table. The following function is called by the <button> click event:
function CloneTable() {
// Verify the [Crew Leader] Tabulator table is present....
var tableLeader = Tabulator.prototype.findTable("#CrewLeaderTable");
if (tableLeader.length > 0) {
alert("The Tabulator table #CrewLeaderTable was found.\ntable.length = " + tableLeader.length);
tableLeader.copyToClipboard("all");
alert("The table contents were copied to the clipboard.");
}
else {
alert("The Tabulator table #CrewLeaderTable was not found.");
}
}
The first alert message verifies that the #CrewLeaderTable object has been found as anticipated. However, the second alert verification is never received thus indicating failure of the Tabulator copyToClipboard method.
I have read through as much of the relevant Tabulator documentation as I can find and I am hoping I have simply overlooked something in my setup.
The following is a copy of my Tabulator constructor:
var table = new Tabulator(divid, {
height: "100%",
layout: "fitDataFill",
movableRows: true, //enable user movable rows
tabEndNewRow: true, //create empty new row on tab
rowContextMenu: myActionContextMenu,
keybindings: {
"navUp": true, //enable navUp keybinding using the "up arrow" key
"navDown": true, //enable navDown keybinding using the "down arrow" key
},
columns: [
{ title: "Phase Code", field: "phaseCode", width: 144, editor: "select", editorParams: { values: function (cell) { return window.laborPhaseCodes; } } },
{ title: "Date Worked", field: "dateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
{ title: "Start Time", field: "timeStart", hozAlign: "center", sorter: "time", editor: timeEditor },
{ title: "Finish Time", field: "timeFinish", hozAlign: "center", sorter: "time", editor: timeEditor },
{ title: "Memo", field: "memo", width: 144, hozAlign: "left", editor: "input" },
{ title: "<button type='button' id='btnClone' class='btn btn-success btn-sm py-0' style='font-size:10px;'>Clone</button>", headerSort: false, headerClick: tabCloneTable }
],
cellEdited: function (cell) {
}
});
I have spent a couple of days trying to figure out the best way to "clone" the data from one table into another. The Tabulator documentation is fairly comprehensive but I fear I have overlooked something. Any assistance is greatly appreciated.
It looks like copyToClipboard doesn't return the data, it is maintained internally and not accessible. But, with what you are doing set/getData works fine.
Here is an example, https://jsfiddle.net/nrayburn/19sjg74k/7/.
Basically, what you want to do is call getData on the parent table and setData on the child table.
const crewLeaderTable = Tabulator.prototype.findTable('#CrewLeaderTable')[0];
const crewMemberTable = Tabulator.prototype.findTable('#CrewMember1Table')[0];
const crewLeaderData = crewLeaderTable.getData();
// You could also use replaceData or addData, depending on the requirements
crewMemberTable.setData(crewLeaderData);
I am trying to figure out how to bind a data model to a custom control. I have searched a number of similar questions here but they don't seem to match what I am trying to do. Maybe my method is wrong.
Anyway, I have created a Plunkr (https://plnkr.co/edit/UghwOObcDn1oRndOpCeJ) to demonstrate. Two input fields are created, one of which is on a custom control which extends a sap.m.Panel. I am attempting to bind the name and enabled properties to both input fields. No problem with the simple sap.m.Input on the page but the one in the custom control MyPanel no such luck. The name and enabled properties for both input fields should change when the button is pressed.
For the custom control I am trying to pass the bind properties to the value and enabled properties of the embedded input field as can be seen in App.view.xml.
If I change the following in MyPanel.js:
value: mSettings.value,
enabled: mSettings.enabled
to
value: '{/name}',
enabled: '{/editing}'
all works fine.
Any help or direction would be appreciated.
You will have to define the 'value' and 'enabled' properties in your custom control. To get the binding working you need to have custom setter/getter methods in your extended control. These methods are called on binding updates.
Here is the updated link
sap.m.Panel.extend('my.App.MyPanel', {
constructor: function(mSettings) {
sap.m.Panel.apply(this, arguments);
this.ef = new sap.m.Input({
width: '100px',
value: mSettings.value,
enabled: mSettings.enabled
});
this.setAggregation('_ef', this.ef);
},
metadata: {
properties: {
enabled: { type: 'boolean', defaultValue: true },
value: { type: 'String', defaultValue: "" }
},
events: {
},
aggregations: {
_ef: { type: 'sap.m.Input', multiple: false, visibility: 'hidden' }
}
},
init: function() {
},
renderer: function(oRM, oControl) {
oRM.renderControl(oControl.getAggregation('_ef'));
},
setValue: function (sValue) {
this.ef.setValue(sValue);
},
setEnabled: function (bValue) {
this.ef.setEnabled(bValue);
},
getValue: function(){
return this.ef.getProperty("value");
},
getEnabled: function(){
return this.ef.getProperty("enabled");
}
});
I have a table done with ui-grid and this table has a column with cellFilter definition like this:
{ field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
My gridMenu custom item is configured like this:
gridMenuCustomItems: [
{
title:'Custom Export',
action: function ($event) {
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);
uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);
},
order:0
}
]
The table is displayed correctly, but when I try to export to CSV, the Company column is exported with empty value. Here is my Plunkr.
Any suggestion will be appretiated
References
I did some research and according to ui-grid Issue #4948 it works good when the Company column is filled with an static catalog. Here is a Plunkr demostrating that.
As you mentioned, there is an export issue when the values in the column are not static, so I forked your plunker with a solution that creates the company mapping for each data object and adds it as a key-value once you get the company catalog back:
$http.get('https://api.github.com/users/hadley/orgs')
.success(function(data) {
$scope.companyCatalog = data;
angular.forEach($scope.gridOptions.data, function(item) {
var compMap = uiGridFactory.getMapCompany(item.company, $scope.companyCatalog);
item.mappedCo = compMap;
});
});
I've kept the original company column but made it invisible (rather than overwriting it), so it exports with the rest of the data in the csv. New column defs:
columnDefs: [
{ field: 'name' },
{ field: 'mappedCo', name: 'Company'},
{ field: 'company', visible: false }
]
Also, in the case that you were getting your data from a server, you would have to ensure that the data and the catalog returned before you run the mapping function. This solution may not work in your particular use case; I don't know.
I found a solution to the CSV export to be able to display the cell display value.
My mistake was using row.grid instead of this.grid at the mapCompany cell filter:
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
],
The right way to use it is using this:
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
],
Here is my Plunkr.
I am a 100% newb to Sencha and am trying to take a stab at re-factoring my company's mobile app.
Here is my app.js:
Ext.application({
name: 'RecruitTalkTouch',
views: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' }
]);
}
});
Login.js View:
Ext.define('RecruitTalkTouch.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
xtype: 'loginForm',
id: 'loginForm',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button' ],
config: {
title: 'Login',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Email',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
]
}
});
Login.js Controller:
Ext.define('RecruitTalkTouch.controller.Login', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: 'loginForm'
},
control: {
'#logInButton': {
tap: 'onSignInCommand'
}
}
},
onSignInCommand: function(){
console.log("HELLO WORLD");
}
});
When I click the submit button, nothing happens. How can I hook up my submit button to listen for events (click, tap, etc) along with submitting the information to a backend API?
In app.js file of your application, add:
controllers: [
'Login'
]
in your application class. And for submitting information, call a Ajax request like this:
Ext.Ajax.request({
url: // api url..,
method: 'POST',
params: {
username: // get user name from form and put here,
password: // get password and ...
},
success: function(response) {
do something...
},
failure: function(err) {do ..}
});
from inside onSignInCommand() function.
You must activate your controller by adding it to the controllers option of your application class.
Then, to submit your data to the backend, you've got several options. You can use a form panel instead of your raw container, and use its submit method. Alternatively, you can use the Ext.Ajax singleton. In this case, you'll have to build the payload yourself. Finally, you can create a model with a configured proxy, and use its save method. This last way is probably the best for long term maintainability... Even if in the case of a simple login form, that may be a little bit overkill.
Can u please refer this sample app to create login form. Its very simple app please go through it.
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/
I have a simple rest store and after filling it with several records I am trying to send post request to server with array of records by calling create function.
The POST request is sent but only with one record instead of array of records.
UPDATE - I forgot to mention that this record has fields with empty values, and that is strange too, because I am filling store with values.
I stalled. Please give me a light where did I go wrong. Thanks.
My code samples:
Ext.define('my.store.testStore',{
extend: 'Ext.data.Store',
storeId: 'teststore',
model: 'my.model.testModel',
proxy: {
type: 'rest',
url: 'http://someurl.ru',
reader: 'json'
}
});
Ext.define('my.model.testModel',{
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'email', type: 'string'}
]
});
var namesList = [Ext.create('my.model.testModel',{
'name':'test name1',
'phone':'343-343',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'6345',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'24324',
'email':'test#test.com'
})
];
var testStore = Ext.create('my.store.testStore');
testStore.loadData(namesList);
testStore.create();
You should use testStore.sync() insted of testStore.create()
Another things:
testStore.create() - this function takes an object as first parameter and creates instance of the model then sends it to the server.
In case if "create" is called without parameter then instance of the model is created based on values from fields defaultValue which by default is set to "", that is way you got response with empty values.
About namesList. You forgot to add ")" to the 3-th model.
var namesList = [Ext.create('my.model.testModel',{
'name':'test name1',
'phone':'343-343',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'6345',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'24324',
'email':'test#test.com'
})//Here was missed ")"
];
After a great time, this issue appeared again so I had to solve it anyway.
And finally I succeeded to find working solution. The point is was just to add batchActions: true to store. Like this:
Ext.define('my.store.testStore',{
extend: 'Ext.data.Store',
storeId: 'teststore',
model: 'my.model.testModel',
proxy: {
type: 'rest',
url: 'http://someurl.ru',
reader: 'json',
batchActions: true
}