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.
Related
I have a GridStore in Extjs which can store records with two grid columns. I have a problem when one record exists in Grid, if i delete the grid its been deleted successfully in server side, but that still exists in Grid.
Sample code:
xtype: 'grid',
store: 'SampleStore',
border: false,
width : 542,
ref: '../sampleGrid',
id: 'sampleGrid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
header: 'Name',
sortable: true,
.............
view: new Ext.grid.GridView({
forceFit: true
})
Thanks for help in advance.
Make sure you are using:
grid.getStore().remove(record); //remove record from grid
grid.getStore().sync(); //sync with server
If you want to remove all items, do:
grid.getStore().removeAll();
grid.getStore().sync();
But be careful! That will delete everything!
This worked for me:
Ext.ComponentQuery.query('#yourGrid')[0].getStore().removeAll();
Hope it helps.
var usrStore = Ext.StoreManager.lookup('LES.ossi.ossi-sampleapp.store.MainStore');
usrStore.removeAll();
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.
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!
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();