Is it possible to set a mask on a textfield in ST2 ?
{
xtype: 'textfield',
name: 'phonenumber',
label: 'Your phone number',
mask: '(999) 999-9999'
},
Works in Ext but not in ST, I 'thought' ST was built on top of Ext
There's no direct property in Sencha Touch that will do this job.
So, you may need to do something like this ..
{
xtype: 'textfield',
name: 'phonenumber',
label: 'Your phone number',
placeHolder: '(999) 999-9999',
listeners : {
keyup : function( ) {
// Code that checks the i/p value according to placeHolder goes here ...
}
}
},
Btw, there's one post on Sencha Touch forum.
Hope that helps you!
Related
I would like to hide clear icon from textbox in sencha control through code.
How to do it?
Please provide sample code.
Thanks
Try this ::
{
xtype : 'textfield',
clearIcon : false,
name : 'name',
id : 'whatever'
}
There's a config property called clearIcon that you can toggle.
You can add this to you global CSS
.x-field-clearable.clear-icon-hidden .x-field-input .x-clear-icon {
display: none;
}
and then when you want to hide the clear icon of a field you just get your field and do
field.addCls('clear-icon-hidden');
Hope this helps
You can simply set the clearIcon config to false. Like this,
Ext.getCmp('ID OF THE TEXTFIELD').setClearIcon(false);
Example:
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
id: 'textfield1',
label: ''
},
Solution:
Ext.getCmp('textfield1').setClearIcon(false);
Since I'm not sure what version of Ext JS this was pertaining to, here is an update for Ext JS 6.5.x as it no longer uses clearIcon.
{
xtype: 'textfield',
itemId: 'tfLastName',
label: 'Last Name',
value: 'Allord',
*clearable: false*,
editable: false
},
This is also for the modern toolkit, per Sencha documentation; the classic toolkit doesn't have this feature.
I am using ExtJs4.I have a form in my web application in which there is text box.The scenario is to provide an AJAX like search(like Google) when any key is pressed in the text box.Search will look into a web service and display the result(JSON object) in drop drown.Similar to Google search.
Is there any idea,link or tutorial for doing this?
Thanks
You could use ComboBox for this. With trigger or without one (that looks like a TextBox).
Sencha provides good examples:
http://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html
http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
This is a simple example:
{
xtype: 'combo',
id: 'myCombo',
store: Ext.create('Ext.data.ArrayStore', {
model: Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: ['id','data1','data2']
}),
proxy: {
type: 'ajax',
url : 'data.json',
reader: {
type: 'array'
}
}
}),
triggerAction: 'query',
minChars: 2,
fieldLabel: 'Search',
displayField: 'data1',
msgTarget: 'side',
triggerCls : 'x-form-search-trigger', // Search Icon For Instance
listConfig: {
getInnerTpl: function() {
return '<div>{data1}</div><div>{data2}</div>';
}
}
}
And JSON file:
[
['1','data1-1','data2-1'],
['2','data1-2','data2-2'],
['3','data1-3','data2-3'],
['4','data1-4','data2-4'],
['5','data1-5','data2-5']
]
Try this example: http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
I think this example http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html will be interesting for you. This realization use standard combobox control. In your case you need to set minChars property = 1, in this case store binded to Combobox will generate standard READ query with filter param to server. You can generate results there.
I'm new to sencha touch and I'm trying to dynamically change the bg color of a field.
I know there's a way to do it via sass and copmass, BUT if someone knows how to do it dynamically...
Thanks A lot,
try with this
LinePanel.Toolbar.getComponent("finBtn").el.setStyle( { backgroundColor: '#4F4F4F' });
You can try:
Ext.getCmp('issue-estimated-hours').setStyle({backgroundColor: '#BA661B'});
where 'issue-estimated-hours' is the id that I assigned to the form field like this:
{
xtype: 'textfield',
label: 'Estimated Hours',
id: 'issue-estimated-hours',
name: 'estimated_hours',
readOnly: true
}
you can try
Ext.getCmp('yourcomponentId').setCls('red');
In css
.red
{ background-color:red}
New to sencha touch here. I've checked out quite a few tutorials online. I am having an issue trying to get the value of a text field. The error I am getting when I click my login button is Uncaught TypeError: Cannot call method 'getValue' of undefined. Does that mean my Ext.getCmp is undefined then? I have this panel wrapped in the regular Ext.setup....onReady:.....
var login = new Ext.Panel({
height:'auto',
scroll:'vertical',
layout:{
type:'vbox',
align:'center'
},
items:[
{
cls:'launchscreen',
html:logo,
padding:10
},
new Ext.form.FormPanel({
width:300,
cls:'loginform',
items:[
{
xtype: 'fieldset',
title: 'Login',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username',
labelWidth: 85
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
labelWidth: 85
}
]
},
{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler:function()
{
alert(Ext.getCmp('username').getValue());
}
}
]
})
]
});
EDIT: I was able to get the value if I set the id property on the text field. I've seen some example where the id isn't set and they get the value based off the name property. So I guess my question now is am I supposed to get the value based off id or name?
Using Ext.getCmp() you have to provide the ID of the element whose value you want. See Sencha API doc's for this:
getCmp( String id )
This is shorthand reference to Ext.ComponentManager.get. Looks up an existing Component by id
Parameters
id : String
The component id
You can also find the element by name, but I think it is faster by ID but perhaps also a bit expensive for the browser's engine. Can't say anything about that really.
Anyway, finding field by name is possible by using findField() method. With this method you should provide the id or name of the field that you want. See API doc: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-findField
Example:
var fieldValue= Ext.getCmp("YourFormID").getForm().findField("FieldName").getValue();
I can use the setOptions method to successfully specify the options of a select field as follows:
setOptions(
[ {text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
])
However, I would instead like setOptions to work with a loaded data store rather than hard coding the text/value array like above.
The store has one item type in it 'vehicle' and the json response from the server which loads it is of the form {'vehicle' :'mercedes'}, {'vehicle' 'jaguar'} (ignore if I have the json syntax wrong, am typing this from memory. And finally, I would be fine with having the value field being the same as the text field for setOptions.
However, I am stumped how to accomplish this. Many thanks to anyone who can help me.
Use this:
{ id: 'theSelect',
name: 'vechicleSelect',
xtype: 'selectfield',
store: storeObejct,
displayField: 'vehicle',
valueField: 'vehicle'
}
Read the whole API here Sencha Touch selectfield
You could cycle through the store and push the data into an array then use the array as the argument for setOptions.
To add to warmachine's answer...
In your view:
{
xtype: 'selectfield',
id: 'NameId',
label: 'Name',
labelWrap: true,
placeHolder: 'name'
},
Controller or initialize function in your view:
initialize: function(){
var me = this;
me.callParent(arguments);
var sto= Ext.getStore('Persons');
sto.load();
var options = [];
sto.each(function(record){
options.push({
value: record.get('displayname'),
text: record.get('displayname')
});
});
var box = Ext.ComponentQuery.query('#NameId')[0];
box.setOptions(options);
},