I'm trying to load a store into a Select field in sencha touch 2.0 but got a strange proble:
For following code:
{
xtype : 'list',
store : 'Docbases',
itemTpl : 'Hello {docbase}!'
}, {
xtype : 'selectfield',
label : 'Docbase',
id : 'docbase',
store : 'Docbases',
displayField : 'docbase',
valueField : 'docbase',
placeHolder : 'Select a Value'
}
The list component can display well, while selectfield cannot display the value. When click on that selectfield, I got a console error:
Uncaught TypeError: Cannot call method 'get' of null
My Store is declared as:
Ext.define('FDMobileClient.store.Docbases', {
extend : 'Ext.data.Store',
requires : ['FDMobileClient.model.Docbase'],
model : 'FDMobileClient.model.Docbase',
autoLoad : true,
proxy : {
type : 'ajax',
url : '/MobileInternalProject/mobile/getDocbaseList.action',
reader : {
type : 'json',
root : 'docbases'
}
},
});
Does anyone have any ideas what I'm doing wrong :(
I'm appreciated all of your help. Thanks
Long
Your store seems fine to me. That's what I did to get is sorted:
in your view config:
config: {
...
docStore : null
...
},
in your view init:
initialize: function() {
...
docStore = Ext.create('FDMobileClient.store.Docbases');
...
},
finally the code for your selectfield
{
xtype : 'list',
store : 'Docbases',
itemTpl : 'Hello {docbase}!'
}, {
xtype : 'selectfield',
label : 'Docbase',
id : 'docbase',
store : docStore, //NOTE: no quotes!
displayField : 'docbase',
valueField : 'docbase',
placeHolder : 'Select a Value'
}
It worked for me, it should be OK for you too. Good luck, Alex
You should give your store an ID and use this identifier when referring to the store:
Ext.define('FDMobileClient.store.Docbases', {
extend : 'Ext.data.Store',
requires : ['FDMobileClient.model.Docbase'],
model : 'FDMobileClient.model.Docbase',
id : 'DocbaseStore'
...
}
{
...
store : 'DocbaseStore',
displayField : 'docbase',
...
}
Related
The thing is that i'm trying to bind the form values after itemtap in sencha touch 2, and setting the data over the form View, but not seems to work :(, i have the next code:
//the controller file
Ext.define( 'myApp.controller.myController' ,
{
extend : 'Ext.app.Controller',
config :
{
refs :
{
myNavigationView : '#myNavigationView',
detailView : '#detailView'
},
control :
{
'#listView' :
{
itemtap : 'itemSelected'
}
}
},
itemSelected : function ( list , index , target , record , e , eOpts )
{
var me = this;
me.getMyNavigationView().push( { xtype : 'detailView' } );
var detailView = me.getDetailView().down( '[itemId=detailData]' );
detailView.setData( record.data );
}
} );
//the detailViewFile
Ext.define( 'myApp.view.DetailView' ,
{
extend : 'Ext.form.Panel',
xtype : 'detailView',
id : 'detailView',
config :
{
title : 'Detail',
layout :
{
pack: 'top'
},
items :
[
{
xtype : 'fieldset',
itemId : 'detailData',
items :
[
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
value : '{modelValue1}'
},
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
value : '{modelValue2}'
}
]
}
]
}
} );
The result that i'm getting is the form with its fields and the value looks like this
{modelValue 1}
and it is not getting the value from the record, i have and store and a model, i have try to print on console the value from the record, and it has a value so, the question is, is there a way to bind the values from a list item to set them on the detail view, or the only way is to set manually each text field?
I have found the solution, the only thing that is need, is that use the set Record method over the form view and at the names on each text field, must be equals to the field name on the model.
here is the example code :
//the controller file
Ext.define( 'myApp.controller.myController' ,
{
extend : 'Ext.app.Controller',
config :
{
refs :
{
myNavigationView : '#myNavigationView',
detailView : '#detailView'
},
control :
{
'#listView' :
{
itemtap : 'itemSelected'
}
}
},
itemSelected : function ( list , index , target , record , e , eOpts )
{
var me = this;
me.getMyNavigationView().push( { xtype : 'detailView' } );
var detailView = me.getDetailView();
detailView.setRecord( record );
}
} );
//the detailViewFile
Ext.define( 'myApp.view.DetailView' ,
{
extend : 'Ext.form.Panel',
xtype : 'detailView',
config :
{
title : 'Detail',
itemId : 'detailView',
layout :
{
pack: 'top'
},
items :
[
{
xtype : 'fieldset',
itemId : 'detailData',
items :
[
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
name : 'modelFieldName1'
},
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
name : 'modelFieldName2'
}
]
}
]
}
} );
I'm trying to take a test api property of ajax proxy in store, but seems it does not work.
I have no idea why it does not work. I've just followed reference book.
Would someone please give me an advice ? I've attached source code.
Below is source code for model.
Ext.define('directModel', {
extend : 'Ext.data.Model',
fields : [
{name : 'id', type : 'int'},
{name : 'firstName', type : 'string'},
{name : 'lastName', type : 'string'},
{name : 'company', type : 'string'},
{name : 'email', type : 'string'},
{name : 'dob', type : 'date'},
{name : 'age', type : 'int'},
{name : 'coworker', type : 'string'}
]
});
Below is source code for store.
var store = Ext.create('Ext.data.Store', {
storeId : 'directStore',
model : 'directModel',
proxy : {
type : 'ajax',
api : {
read : '/common/command.jsp?action=read',
create : '/common/command.jsp?action=add',
update : '/common/command.jsp?action=update',
destory : '/common/command.jsp?action=remove'
},
reader : {
type : 'json',
root : 'root'
},
writer : {
type : 'json',
root : 'data'
}
}
});
var s = Ext.data.StoreManager.get('directStore');
s.load({
callback : function(){
var r = Ext.ModelManager.create({
id : '346012',
firstName : '',
lastName : '',
company : '',
email : '',
dob : '',
age : 3,
coworker : 'N/A'
}, 'directModel');
s.add(r);
s.sync();
}
});
I just loaded store to bring the data from server side and I found out it's okay.
Also I tried to add new reocrd and invoke "sync" function.
As I know, request url should be create property of api. However nothing happened.
pls give me an advice.
I have a ProfileView which should show some user data. This is the first time I am trying to get data from MySql and showing it on a Sencha view.
The view
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
var myStore = Ext.create("Ext.data.Store", {
model : "MyApp.model.User",
proxy : {
type : "ajax",
url : "php/get_user.php",
reader : {
type : "json"
// rootProperty : "users"
}
},
autoLoad : true
});
The data is returned correctly but nothing is shown, and this I am trying to figure out.
The Response
[{"ID":"19","USERNAME":"Annet","EMAIL":"annet#annet.nl"}]
I skipped the rootProperty because it is a single user.
The Model
Ext.define('MyApp.model.User', {
extend : 'Ext.data.Model',
config : {
fields : [{
name : 'ID',
type : 'int'
}, {
name : 'USERNAME',
type : 'string'
}, {
name : 'EMAIL',
type : 'string'
}]
}
});
So, why does the list not show anything ?
Update
I check to see it the store contains data and it does
map: Object
ext-record-1: Class
_data: Object
EMAIL: "annet#annet.nl"
ID: 19
USERNAME: "Annet"
id: "ext-record-1"
__proto__: Object
Why is it not picked up by the list? I tried DataView as well.
You need to use itemTpl, i changed code for you.
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
itemTpl : '<div>{ID} <span> {USERNAME} </span> <span> {EMAIL} </span> </div>',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
*This is my view, i am creating panel, * i want to add Ext.List to the panel
Ext.define('myApp.view.MyWant', {
extend : 'Ext.Panel',
xtype : 'mywant',
initialize : function() {
console.log(localStorage.currentuser + " in MyWant View");
var newWant = {
xtype : 'button',
iconCls : 'add',
ui : 'action',
handler : this.onTapNew,
scope : this
};
var topToolbar = {
xtype : 'toolbar',
docked : 'top',
defaults : {
iconMask : true
},
title : 'My Wants',
items : [{
xtype : 'spacer'
}, newWant]
};
var myWantsList = {
xtype : 'panel',
flex : 1,
id : 'mywantslist',
html : 'want list'
};
this.add(topToolbar);
this.add(myWantsList);
},
config : {
layout : {
type : 'vbox'
}
}
});
i am adding below list to myWantsList Panel from controller (the below code is in controller)
var myWantList = Ext.create('Ext.List', {
itemCls : 'my-dataview-item',
html : 'wants-list',
itemTpl : '<div><img src="'+localStorage.httpServerPrefix+
'{imageURI}"/><span class="list-item-title">{fullname}</span><span id="count" class="list-item-title">{replyCount}</span><p class="list-item-title">{text} <span id="time" class="list-item-title">{time}</span></p>',
store : myWantStore
});
Ext.getCmp("mywantslist").add(myWantList);
I checked inspect element ,there is a code...
but its displaying blank
You have to set a property on list define, renderTo, example:
var myWantList = Ext.create('Ext.List', {
renderTo: mywant.getComponent().element.dom,
itemCls : 'my-dataview-item',
html : 'wants-list',
itemTpl : '<div><img src="'+localStorage.httpServerPrefix+
'{imageURI}"/><span class="list-item-title">{fullname}</span><span id="count" class="list-item-title">{replyCount}</span><p class="list-item-title">{text} <span id="time" class="list-item-title">{time}</span></p>',
store : myWantStore
});
For some reason my form keeps on doing a GET instead of posting the data to the URL I configured.
My form looks like this:
Ext.define('App.view.LoginFormPanel', {
extend : 'Ext.form.Panel',
xtype : 'loginForm',
id : 'loginForm',
config : {
title : 'Login',
iconCls : 'user',
ui : 'light',
items : [
{
xtype : 'fieldset',
title : 'Login',
items : [
{
xtype : 'textfield',
label : 'Login',
name : 'j_username',
required : true,
readOnly : false
}, {
xtype : 'passwordfield',
label : 'Password',
name : 'j_password',
required : true,
readOnly : false
}
]
}, {
xtype : 'button',
ui : 'confirm',
text : 'Login',
action : 'login'
}
]
}
});
And my controller that submits the form looks like this:
......
login : function() {
loginForm.submit({
url : 'j_spring_security_check',
method : 'POST'
});
},
......
I tried to put the url and method on the form too put no luck either :(.
Does anybody know what I am doing wrong?
Try to set standardSubmit to true. By default Touch forms are submitted via ajax GET method, but standardSubmit will send POST. Note that parameters will be encoded in http payload, not in the url params.
Cheers, Oleg
My answer is for those who have a problem with submitting a form with POST method.
If you are new to Sencha and you have a form which is submitting nothing, you probably followed this tutorial Building your first app
It has a problem. Form items MUST HAVE NAME which is missing in the example.
Items should look something like the following:
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'textareafield',
name: 'message',
label: 'Message'
}
]