Hi my selectfield structure is as follow :
{
xtype: 'selectfield',
label: 'Name :',
name: 'description',
displayField: 'description',
valueField: '_description',
store: 'ABC',
autoSelect: true,
labelWidth:'35%',
readOnly:true
}
How I can set Default value as --select--
Is this possible.
Please guide me or provide working code thanks In Advance.
I think you're looking for placeholder:
{
xtype: 'selectfield',
placeholder: '--select--',
...
}
See docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.field.Input-cfg-placeHolder
If you want an actual value to be set in the field, i.e. 'default value' as you ask, you can set the default value on the model, e.g.
Ext.define('Core.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'description', type: 'string', defaultValue: '--select--' }
]
}
});
Then on your store 'ABC' make sure the model is set correctly i.e. model: 'Core.model.MyModel.
If you just want a placeholder label to appear saying '--select--' - purely for decorative/aesthetic purposes, not an actual value that would then be used, then kevhender's answer is correct, i.e. the placeholder property.
Related
I've noticed a problem with ST2 and selectfield pickers. I'm testing this on Desktop browser and tablet and both seem to show the same problem.
The problem seems to stem from having form data that is empty or uninitialised.
My example is a user logs into their account and needs to set their marital status. As this has never been set before the backing store model is actually 'null' for their marital status. When they click the picker, the pick for some reason picks the first item in the checklist automatically. This is evident by the check-mark on the right side of the item. The 2nd side-effect of this is, if you then select the first item, ST2 doesn't see this as an item change and so doesn't then propagate the selection change back to the form.
Is this is a bug? How do I get round this problem?
Ext.define('Gender', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Id', type: 'int'},
{name: 'ItemName', type: 'string'}
]
}
});
Ext.define('Details', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Gender', type: 'int'}
]
}
});
var myGenderStore = Ext.create('Ext.data.Store', {
model: 'Gender',
data : [
{Id: 1, ItemName: 'Male'},
{Id: 2, ItemName: 'Female'}
]
});
var myDetailsStore = Ext.create('Ext.data.Store', {
model: 'Details',
data : [
{ Gender: null }
]
});
var p = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender'
}
]
}
]
});
p.setRecord(myDetailsStore.getAt(0))
Ext.Viewport.setActiveItem(p);
// notice the picker has 'Male' selected even though the backing store for the Gender field is null
// also, we want to select Male from the list, but this isn't reflected on the form
// run below command in console window after selecting 'Male' even though it is selected and it shows null
// It only seems to like changes to the value as selecting female works. If then select Male from Female this also works.
p.getValues().Gender;
you can set value for the select field
p.down('selectfield[name=Gender]').setValue(myGenderStore.getAt(0).get('Id'))
see example: http://www.senchafiddle.com/#OuCtQ#GQJ2C
thanks
Just set the autoSelect config property to false,to prevent default selection like this:
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender',
autoSelect:false
}
I have a numberfield like below
{
xtype: 'numberfield',
name: 'phoneNumber',
label: 'Phonenumber',
required: false
}
When a user inserts a value like 3832, it will be saved right but when the user sets a value with 0 at the begin of a sequence like 0123, the zero will be removed and only 123 will be saved.
In my case I want to store some phonenumbers which have a 0 value at the begin.
PS. the phoneNumber in the model is a string, so it will be saved as a string
{ name: 'phoneNumber', type: 'string' }
How could I resolve this?
Thanks in advance.
You should using a textfield and in controller to checking Ext.isNumeric(phoneNumberValue)
I have worked on your problem. Use your model like this. Also use textfield instead of a numberfield.
{
xtype: 'textfield',
name: 'phoneNumber',
label: 'Phonenumber',
required: false
}
mymodel.js
Ext.define("Stackoverflow.model.mymodel", {
extend: "Ext.data.Model",
config: {
fields: [
{ name: 'phoneNumber', type: 'string' },
],
validations: [
{ type: 'presence', field: 'phoneNumber', message: 'Enter a Phone number.' },
{ type: 'format', field: 'phoneNumber', matcher: /[0-9]{1,20}/}
]
}
});
And then validate this inside your controller. I hope you have code for model validation.( If not leave a comment)
I have a sencha touch password field like below:
xtype : 'passwordfield',
id : 'password',
name: 'password',
label : 'Password',
labelWidth : '40%',
I want to get the value of this field. I tried using getValue() method. But it is returning me null value.
In controller:
merchantPwd : '#password',
And then like this:
var pwd = this.getMerchantPwd().getValue();
alert("password:" +pwd);
Please help..
The only different between passwordfield and other input fields is its value is hidden by showing just meaningless characters, e.g dots or stars. Except this, it's just like other input field.
For example, try this in the Sencha Touch documentation code editor & live preview, it works.
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Register',
items: [
{
xtype: 'emailfield',
label: 'Email',
name: 'email'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password',
id: 'abc',
value: 'abc',
}
]
}
]
});
Ext.Msg.alert(Ext.getCmp('abc').getValue());
So I think there might be some issues such as:
The password field is blank (actually in this case it shows nothing but not null value)
There're some problems with your controller code. Pay attention to this pointer.
I have a combo box with list a set of values,
Ext.define('loincList', {
extend: 'Ext.data.Model',
fields: [{ name: 'loincNumber', mapping: 'loincNumber' },
{ name: 'component', mapping: 'component' }
]
});
ds = Ext.create('Ext.data.Store', {
model: 'loincList',
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/LOINCData/getLOINCData',
reader: {
type: 'json',
root: 'LOINCData'
}
}
});
combo box:
{
xtype: 'combo',
fieldLabel: 'Search Loinc Code',
name: "loincId",
displayField: 'loincNumber',
valueField: 'id',
width: 400,
store: ds,
queryMode: 'local',
allowBlank:false,
listConfig: {
getInnerTpl: function() {
return '<div data-qtip="{loincNumber}.{component}">{loincNumber} {component} {status}</div>';
}
}
}
when i type a number in the combo-box it filter based on the number entered but when i type a text ,it is not filtering based on text entered.How to filter based on text entered.
When you type the data to the combobox, it will filter based on the displayField. So I think when you "type a text it is not filtering based on text entered" because no items in the combo has displayField with prefix like the text you typed.
Filtering is working on server side, if you will switch on something like Firebug, you will see special param (usually named filter) with text you typed in control, So you need to check what happen on your server-side. You need to handle with filter text and make filters as you want on server-side.
Hi i have found a lot of examples about loading data from a db in sencha.
i try to make a list with notes and on second step i want to be able to add(save) a note to my db. i try that on localstorage.
for now i load data from a array in my Arraystore.
where shall i set my proxy? (in store or in model?)
how could i insert data in my store?
i have tried something like that on my current arraystore but with no luck:
(this is the code run by pressing a code):
MyArrayStore.add({title:"newnote",narrative:"bla bla bla",date:now,id:noteid});
MyArrayStore.sync();
the browser console gets an error:
Uncaught ReferenceError: MyArrayStore is not defined
shall i make an instance of my store or something?
my model is this:
thanx for the answer. i try that on architect.
my model is this:
Ext.define('MyApp.model.NoteModel', {
extend: 'Ext.data.Model',
alias: 'model.NoteModel',
config: {
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'date',
type: 'date'
},
{
name: 'title',
type: 'string'
},
{
name: 'narrative',
type: 'string'
}
],
proxy: {
type: 'localstorage',
id: 'local'
}
}
});
and my store is this:
Ext.define('MyApp.store.MyArrayStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.NoteModel'
],
config: {
data: [
{
title: 'Note 1',
narrative: 'test1 1'
},
{
title: 'Note 2',
narrative: 'narrative 2'
},
{
title: '3 ertyyh',
narrative: 'narrative 3'
},
{
title: '4 asdf',
narrative: 'narrative 4'
},
{
title: 'Note 5',
narrative: 'narrative 5'
},
{
title: 'weadf',
narrative: 'narrative 6'
}
],
model: 'MyApp.model.NoteModel',
storeId: 'MyArrayStore'
}
});
You should set your proxy in your model OR in your store.
Here's how to do it within your model.
Ext.define('MyModel', {
extend: 'Ext.data.Model',
config: {
fields: ['field1'],
proxy: {
type: 'localstorage',
id : 'my-model-localstorage-id'
}
});
The same can alternatively be done in your store.
After that, given that 'MyArrayStore' is an instance of such a store, the code you propose should work just fine.
Hope this helps.
If you want to access your store (the one you updated in your question), then you can use:
Ext.StoreManager.get('MyArrayStore')
So, for instance, the operations you wanted to perform could be done in the following way:
var store=Ext.StoreManager.get('MyArrayStore');
store.add({title:"newnote",narrative:"bla bla bla",date:now,id:noteid});
store.sync();