I have tried to get the slider value, Instead of numeric value. Im getting as array object as a value, How to rectify it.
Eg:
xtype: 'sliderfield',
html: '<span class="not-like">Not Likely</span> <span class="like">Like</span>',
label: '',
name: 'like',
maxValue: 10,
value: '1'
}
Instead of
xtype: 'sliderfield',
html: '<span class="not-like">Not Likely</span> <span class="like">Like</span>',
label: '',
name: 'like',
maxValue: 10,
value: [1]
}
using Sencha architect version:
3.1.0.1934
Any help in getting the slider value.
I hope you asking for Thump index value.
OnDrag and Onchage event you get the thumb Index and value.
OnDragPointSlider : function(sliderfield, sl, thumb, e, eOpts) {
var slider = sliderfield.getComponent();
var index = slider.getThumbIndex(thumb);
var newValue = slider.getValue()[index];
},
Related
I have the ExtJS tag field with anyMatch = true. Now if you type AB it will show the result and once you choose the selection it will clear the input you have entered i.e. AB Now when you have anyMatch= true that time if I type HI it will show you the result but when you choose the value the input field doesn't get cleared. I saw the ExtJS Tag field code it is handled explicitly in clearInput method. I wanted to know why this is implemented in this way ?
Below is the sample code
Ext.create('Ext.form.Panel', {
title: 'Tag Field Example',
width: 1000,
bodyPadding: 10,
items: [{
xtype: 'fieldcontainer',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'fieldcontainer',
defaults: {
flex: 1,
},
layout: 'hbox',
items: [{
xtype: 'tagfield',
minChars: 1,
anyMatch: true,
allowBlank: true,
margin: '5 5 5 5',
fieldLabel: 'Tag Field 1',
name: 'tagField1',
store: ['ABC D', 'EFG HI', 'C'],
queryMode: 'local',
filterPickList: true,
emptyText: 'Multi Select...'
}]
}]
}],
renderTo: Ext.getBody()
});
This seems to be a bug. If you take a look at the clearInput method from the tagfield class definition, and specifically at the section with the early return:
if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
return;
}
You can see that they discard clearing of the field if the last selected tag field value does not start with the typed input value ('abc d' starts with 'ab' so the field is cleared; 'efg hi' does not start with 'hi' - so the clearing is discarded).
This will clearly not work when you have the anyMatch config enabled.
The early return section from above, should be something like this:
if (!me.anyMatch) {
if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
return;
}
} else {
if (lastDisplayValue.toLowerCase().indexOf(inputValue.toLowerCase()) === -1) {
return;
}
}
We keep the initial check when anyMatch is not enabled, otherwise, we check if the typed input values is included in the last selected tag field value.
Here is a fiddle with the proposed override: https://fiddle.sencha.com/#view/editor&fiddle/32q0
I used arrays for multi string values (list item: Lincoln Abraham, input value: Abraham Lin).
That way method to checks if it matches properly.
In my implenmentation last part of the input string is used as wildcarded string. It also solves the problem where list item is reversed compare to input string, which was in my case.
clearInput: function() {
var me = this,
valueRecords = me.getValueRecords(),
inputValue = me.inputEl && me.inputEl.dom.value,
lastDisplayValue;
if (valueRecords.length && inputValue) {
lastDisplayValue = valueRecords[valueRecords.length - 1].get(me.displayField);
let inputValueArr = inputValue.split(' ');
let lastDisplayValueArr = lastDisplayValue.split(' ');
let matchCount = 0;
Ext.each(inputValueArr, function(iv, idx1, arr1) {
Ext.each(lastDisplayValueArr, function(ldv, idx1, arr2) {
if (!me.anyMatch) {
if (Ext.String.startsWith(ldv, iv, true)) {
matchCount++;
}
} else {
if (ldv.toLowerCase().indexOf(iv.toLowerCase()) !== -1) {
matchCount++;
}
}
});
});
if (matchCount < inputValueArr.length) {
return;
}
me.inputEl.dom.value = '';
if (me.queryMode === 'local') {
me.clearLocalFilter();
// we need to refresh the picker after removing
// the local filter to display the updated data
me.getPicker().refresh();
}
}
}
I have defined a conditional cell template for one of the column. Its displaying the data correctly but I am not able to search for the text in the cell template.
Here is my plunkr:
https://plnkr.co/edit/TDX5jtPord1hkzCVaw3L?p=preview
var template1 = '<div class="">' +
'<div class="" ng-if="COL_FIELD > 30">Greater </div> ' +
'<div class="" ng-if="COL_FIELD < 30"> Lesser </div> ' +
'</div>';
In the template I have put the condition that.. if COL_FIELD > 30 then then write Greater.. or else write Lesser. And now I should be able to search for the Greater or Lesser in Number column.
A solution could be to add a property on your data like :
$http.get('data.json').success(function(data) {
data.map(function(item) {
item.greaterLesser = item.amount > 30 ? 'Greater' : 'Lesser';
});
$scope.gridOptions.data = data;
});
and then instead of using the amount with a template, just bind on this property.
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [{
field: 'name',
width: 70
}, {
field: 'greaterLesser',
name: 'Number',
width: 90,
}, {
field: 'amount',
name: 'Currency',
cellFilter: 'currencyFilter:this',
}]
};
Here is the updated plunker
Edit
If you want to use the template, you could implement the search function yourself. You can add the filter option to your field and implement the condition function. Something like:
filter: {
condition: function(searchTerm, cellValue) {
var value = cellValue > 30 ? 'greater' : 'lesser';
var result = value.search(searchTerm.toLowerCase());
return result > -1;
}
}
Here I used the search function but you could use match or some other function.
Here is a demo plunker
I used the below code to make search work
field: 'EmpId',
displayName: 'Employee Type',
cellTemplate: '<div style="cursor:pointer" class="ui-grid-cell-contents">{{grid.appScope.GetEmployeeType(row)}}</div>',
filter: {
condition: function (searchTerm, cellValue,row,column) {
var value = $scope.GetEmployeeType(row);//same function that you use to display value in cell Template
return (value.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase())>-1);
}
}
I have a form that I add on click new fields. http://jsfiddle.net/Zb8DV/
the user can add his input and click on save.
I want onsave event to store the state in the cookie.
Next time when he enter to the form, I want to load the state, generate the fields in put the values last time he entered to the form.
So if you look at the form bellow:
you click on "add field" and a new field will be generated, after you add fields and put values, I want to save the state and load it next time...
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 500,
bodyPadding: 10,
title: 'Stateful',
stateful : true,
stateId : "MyFormState",
items: [{
xtype: 'button',
text: 'add field',
count: 0,
handler: function () {
this.count += 1;
var me = this;
this.up("form").add([{
"xtype": 'textfield',
name: 'field' + me.count,
fieldLabel: 'field ' + me.count
}]);
}
}, {
xtype: 'button',
margin : '10 10 10 100',
text: 'Save form state on click here',
handler : function(){alert("how do I load the panel with the state saved in cookie??")}
}],
});
In your button handler you can get values from form with getValues() method and then store values into cookies with Ext.state.Manager.set() method.
handler : function(btn){
var form = btn.up('form');
var values = form.getValues();
Ext.state.Manager.set('formFieldValues', values);
}
Restore form state from cookies you can in listener for form afterrender event. For getting form state from cookie you can use Ext.state.Manager.get() method.
listeners: {
afterrender: function(form) {
var values = Ext.state.Manager.get('formFieldValues');
if (values) {
console.log(values);
Ext.Object.each(values, function(key, value) {
form.count += 1;
form.add({
xtype: 'textfield',
name: 'field' + form.count,
fieldLabel: 'field ' + form.count,
value: value
});
});
}
}
}
Fiddle with complete example: https://fiddle.sencha.com/#fiddle/32e
The following should be trivial, but I cannot get it to work:
I have the following Ext.form.Panel:
Ext.define('EvaluateIt.view.SiteEvaluationForm', {
extend: 'Ext.form.Panel',
alias : 'widget.siteEvaluationForm',
id: 'evaluationId',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Url',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
//width: 400,
//height: 330,
width: Ext.os.deviceType == 'Phone' ? screen.width : 300,
height: Ext.os.deviceType == 'Phone' ? screen.height : 500,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'textfield',
name: 'address',
label: 'Address',
itemId: 'address'
},
{
xtype: 'hiddenfield',
itemId: 'imageUriId',
name: 'imageUri'
},
{
xtype: 'button',
itemId: 'siteImage',
text: 'Take Photo'
},
{
xtype: 'button',
itemId: 'save',
text: 'Save'
}
]
}
});
Which gets opened from an onItemDisclosure in a list view, and thus has a record bound to it.
When the 'siteImage' button is tapped, the user selects an image from the photo gallery and the uri is written to a temporary store for processing. This part works just fine.
What I need to do: When 'save' in the above form is tapped I need to take the uri from the temporary store and write it to the same store that all of the values from the above form get saved to.
To do this, I have the following method:
onSaveSiteEvaluation: function(button) {
console.log('Button Click for Save');
//var form = button.up('panel');
var form = Ext.getCmp('evaluationId');
//get the record
var record = form.getRecord();
//get the form values
//var values = form.getValues();
// return a clone for updating of values
var values = Ext.clone(form.getValues());
//if a new siteEvaluation
if(!record){
var newRecord = new EvaluateIt.model.SiteEvaluation(values);
Ext.getStore('SiteEvaluations').add(newRecord);
}
//existing siteEvaluation
else {
// get image uri from temp store
var images = Ext.create('EvaluateIt.store.ImageQueue');
images.queryBy(function(record,id){
images = Ext.getStore(images);
if (images.getCount() > 0) {
var uri = record.get('src');
// image = Ext.getCmp('imageUri');
//image = form.setValue(uri);
//form.getCmp('imageId').setValue(uri);
console.log('URI: ' + uri);
// THIS DOES NOT WORK!!
form.setValues({
imageUri: uri
})
//record.set('imageUri',uri)
console.log('imageUri: '+ record.get('imageUri'));
}
});
// do stuff
record.set(values);
}
form.hide();
//save the data to the Web local Storage
Ext.getStore('SiteEvaluations').sync();
},
Everything in this method works EXCEPT where I write the value of the uri to the form
form.setValues({
imageUri: uri
})
I've tried making 'uriImage' as an xType of hiddenfield and textfield, I've tried cloning the values from the form, etc. all with absolutely no luck in updating the actual attribute imageUri in the store (NOTE: All other form values are updated just fine). What am I missing? Thanks!
UPDATE
This works:
images.queryBy(function(iRecord,id){
images = Ext.getStore(images);
if (images.getCount() > 0) {
var uri = iRecord.get('src');
// update store with URI
form.setValues({
imageUri: uri
})
values = form.getValues();
record = form.getRecord();
}
});
// do stuff
record.set(values);
All's well that ends well!
Because Ext.form.Panel doesn't have setValue method. You first need to get basic form out of it:
form.getForm().setValue();
UPDATE: My bad, I was looking at the ExtJs docs and not Sencha Touch. your form does have setValue method.
After you call setValues(), can you go getRecord() again? Also looks like your record internal variable is defined twice. That should not be an issue, but...
ExtJS 4.1
I have 2 textfields like:
{
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
}, {
fieldLabel: 'Phone',
name: 'phone',
minLength: 8,
maxLength: 20,
value: '+7',
},
As you can see phone field has predefined value.
When I finish filling email fileld, I press TAB key to focus next field (in my case - phone field).
When phone field is being focused by TAB key cursor incfield stands in the end of value (+7|) but all the text in the field becomes selected so if I type something all the text is replaced by new text.
I want cursor to stand in the end of the value string and value text would NOT TO BE SELECED.
Here's a workaround that works:
{
fieldLabel: 'Phone',
name: 'phone',
minLength: 8,
maxLength: 20,
value: '+7',
listeners: {
focus: function(field){
var value = field.getValue();
Ext.Function.defer(field.setRawValue, 1, field, [value]);
}
}
}
Causes a page reflow that sets the caret at the end of the field due to the value being set, should work for ya and doesn't cause a change event.
you can use like this.
{
fieldLabel: 'Phone',
name: 'phone',
minLength: 8,
maxLength: 20,
value: '+7',
listeners:{
focus:function(t,e){
t.selectText(t.getValue().length,t.getValue().length);
}
}
}
It looks like some Chrome behaviour. It's automatically selects all the text in the next text input on TABing.
Tried all the solutions posted and no effect in Chrome (Opera and Mozilla works fine).
Thanks all for taking time!
The key to beating this problem is using setTimeout or something similar to #Reimius' answer.
Chrome and IE selects all text on focus, even if you call event.stopPropagation().
Possible solution (some jQuery used):
var selectText;
selectText = function(element, startIndex, endIndex) {
var range;
// Modern browsers, IE9+
if (element.setSelectionRange != null) {
element.selectionStart = startIndex;
element.selectionEnd = endIndex;
return;
}
// OldIE
range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', endIndex);
range.moveStart('character', startIndex);
range.select();
};
$(document).on('focus', 'input textarea', function(event) {
setTimeout(function() {
selectText(input, selectionStartIndex, selectionEndIndex);
}, 0);
});