Sencha touch: how to allow only a-z and A-Z alphabetic in textfield? - sencha-touch

There is xtype numericfield to allow only number. is there any xtype or way to allow only A-Z and a-z alphabetic in textfield?

Yes, you can do it when you define your Model:
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'}
],
validations: [
{type: 'format', field: 'name', matcher: /^[a-zA-Z]*$/}
]
}
});
If you don't use a Model, you can validate data from your text field in your controller like this:
if (!(/^[a-zA-Z]*$/.test(field.getValue()))) {
// Error: only letters are valid
}

Related

How to fill arrays of references in a single query

I have a schema type Page which has an array of blocks:
{
title: 'Page',
name: 'page',
type: 'document',
fields: [
...
{
title: 'Blocks',
name: 'blocks',
type: 'array',
of: [
{type: 'tileGrid'},
{type: 'otherType'}
],
options: {
editModal: 'fullscreen'
}
}
]
}
The type tileGrid has the following fields:
{
title: 'Tiles',
name: 'tiles',
type: 'array',
of: [{
type: 'reference',
to: [
{type: 'tile'}
]
}]
}
So the tile type is deeply nested page.blocks[].tiles[].tile.
How can I query page and fill in the tile references in the same query?
Since tile is a reference, you need the dereferencing operator, rather than the dot operator. This should work: page.blocks[].tiles[]->.

How to load localstorage data in list view in sencha touch?

How to load localstorage data in list view in sencha touch?
I have my model:
Ext.define('SenchaWebWorker.model.tweetsModel', {
extend: 'Ext.data.Model',
requires:['Ext.data.proxy.LocalStorage'],
config: {
fields: [
{ name: 'id', type: 'string' },
{ name: 'text', type: 'string' },
{ name: 'date', type: 'string' },
{ name: 'uname', type: 'string' },
{ name: 'uid', type: 'string' },
{ name: 'uimgurl', type: 'string' }
],
proxy: {
type: 'localstorage',
id : '_tweetStore'
}
}});
and my store:
Ext.define('SenchaWebWorker.store.tweetStore', {
extend: "Ext.data.Store",
config: {
storeId: '_tweetStore',
model: 'SenchaWebWorker.model.tweetsModel',
autoLoad:true
}});
please give me some example if possibel.
Thanks.
It's very easy to do, just simply reference your store in the config object of your list, i.e:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
xtype: 'MyList',
config: {
store : 'MyStore',
itemTpl : document.getElementById('tpl_my_list').innerHTML
}
});
All you need to do is set store property of list to _tweetStore
Ext.define('SenchaWebWorker.view.tweetsList', {
extend: 'Ext.List',
xtype: 'tweetlist',
config: {
store:'_tweetStore',
scrollable:true,
scrollToTopOnRefresh:true,
deselectOnContainerClick:true,
............
............
}
});
Since you have autoLoad set to true, no need to explicitly load store data.

Auto-bind selectfield to a store in sencha touch?

I'm trying to bind a selectfield to a store in sencha-touch. However, I'm getting the following error:
Uncaught TypeError: Cannot call method 'on' of undefined
The field looks like so:
{
xtype: 'selectfield',
label: 'Gender',
store: 'GenderStore',
displayField: 'ItemName',
valueField: 'Id'
},
and store looks like so:
Ext.define('MobileApp.store.Gender', {
extend: 'Ext.data.Store',
requires: [
'MobileApp.model.Lookup',
'Ext.data.proxy.Rest'
],
config: {
autoLoad: true,
model: 'MobileApp.model.Lookup',
storeId: 'GenderStore',
proxy: {
type: 'rest',
url : '/api/lookup/genders',
reader: {
type: 'json'
}
}
}
});
Any ideas why this isn't working? I thought maybe specifying the storeId would automatically create the store similar to using xtype? Does the field not bind automatically to the store, or do I need to explicitly create the store?
Ensure your view is requiring the store. Perhaps it does not exist yet (and it needs to so it can find it by ID):
requires: ['App.store.MyStore']
the field
{
xtype: 'selectfield',
label: 'Gender',
store: GenderStore,
displayField: 'ItemName',
valueField: 'Id'
},
the store
var GenderStore = Ext.create('Ext.data.Store', {
requires: [
'MobileApp.model.Lookup',
'Ext.data.proxy.Rest'
],
autoLoad: true,
model: 'MobileApp.model.Lookup',
proxy: {
type: 'ajax',
url : '/api/lookup/genders',
reader: {
type: 'json',
rootProperty: 'd'
},
root: 'd'
}
});

Sencha 2 - displaying null value in nested List

I am new to sencha. I am developing an app using treestore and nestedList.
I am unable to load data returned from a coldfusion component.it shows null.
Here is my Viewport.js:
Ext.define('Myapp.view.Viewport', {
extend: 'Ext.tab.Panel',
xtype:'newviewport',
config: {
fullscreen: true,
tabBarPosition: 'top',
html: 'hiiiiiiiiiii',
cls:'test',
items: [
{
title: 'Sections',
iconCls: 'home',
xtype: 'sectionslist'
}
]
}
});
My store:samplestore.js
Ext.define('Myapp.store.samplestore', {
extend: 'Ext.data.TreeStore',
config: {
autoLoad: true,
model: 'Myapp.model.sampleModel',
proxy: {
type: 'ajax',
url: '/sample/sample1.cfc?method=getSections',
reader: {
type: 'json',
rootProperty:'DATA'
}
}
}
});
My model: sampleModel.js
Ext.define("Myapp.model.sampleModel", {
extend: "Ext.data.Model",
config: {
fields: [
{name: 'LoginID', type: 'string'},
{name: 'FIRSTNAME', type: 'string'}
]
}
});
My sample1.cfc :
<cfcomponent name="sample" output="false">
<cffunction name="getSections" output="no" returnformat="json" access="remote">
<cfquery name="qryGetDetails" datasource="#request.dsn#">
SELECT TOP 5
LoginID, FIRSTNAME
FROM
tblUser
</cfquery>
<cfreturn qryGetDetails>
</cffunction>
</cfcomponent>
My Sectionslist.js
Ext.define('Myapp.view.Sectionslist', {
extend: 'Ext.dataview.NestedList',
xtype: 'sectionslist',
config: {
store: 'samplestore'
itemTpl: [
'{FIRSTNAME}<br/>'
].join(''),
onItemDisclosure: function(record, btn, index) {
console.log("worked");
}
},
//getItemTextTpl: function(node) {
//console.log(node);
// return node.data.FIRSTNAME+ ':<strong></strong>';
// }
});
And finally my json data:
{"COLUMNS":["LOGINID","FIRSTNAME"],"DATA":[["bt","Jn"],["jr","Jy"],["b20","Best"],["jman","Jeff"],["fenad","Fn"]]}
PLease help to find out my problem, I cant trigger where i went wrong, I am getting null value, as displaying data is wrong.:
itemTpl: [
'{FIRSTNAME}'
].join(''),
Instead of Firstname ,what should i display here??? I tried many methods, but no use, please help.....
Your JSON is returning a collection of Arrays like
["bhpAgent", "Jan"],
but the field definition expects the response to be a collection of objects like
{"LoginID": "bhpAgent", "FIRSTNAME": "Jan"}.
Not sure of the best solution. Can ColdFusion generate JSON objects instead?
If not, maybe subclass Ext.data.reader.JSON and override getResponseData().
Might also be worth checking the TreeStore docs as that view has a further requirement for tree structured data.

how to change tree panel property "text:" with any other name e.g "name:" in extjs

I am new in Extjs, following is my code:
children: [{
text:'Basic Ext Layouts',
expanded: false,
children:[{
text:'Absolute',
id:'absolute',
leaf:true,
},{
I was trying to make it like
children: [{
name:'Basic Ext Layouts',
expanded: false,
children:[{
name:'Absolute',
id:'absolute',
leaf:true,
},{
but its not working, please tell me solution
Set displayField config to 'name':
Ext.create('Ext.tree.Panel', {
displayField: 'name',
// ...
});
UPDATE
You also have to create Model for your treestore and append 'name' to it's fields config:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [ 'name' ]
});
Here is working example.