I have a problem with getting textField value.
View :
I have Toobar variable and I add to tbar of my panel.
var orderListTbar = Ext.create('Ext.Toolbar',{
id : 'orderListTbar',
items : [
'',{
xtype : 'radiofield',
name : 'searchType',
value : 'order_name',
boxLabel : 'Order Name'
},'',{
xtype : 'radiofield',
name : 'searchType',
value : 'order_no',
boxLabel : 'Order No'
},'',{
xtype : 'radiofield',
name : 'searchType',
value : 'status',
boxLabel : 'Status'
},'=',{
xtype : 'textfield',
name : 'keyword',
value : 'Keyword'
},'|',{
xtype : 'datefield',
name : 'order_from',
fieldLabel : 'From ',
labelWidth : 40,
width : 150,
value : new Date()
},'~',{
xtype : 'datefield',
name : 'order_to',
fieldLabel : "To ",
labelWidth : 40,
width : 150,
value : new Date()
},'|',{
xtype : 'button',
name : 'searchBtn',
text : "Search"
}
]
});
And In my controller. I want to get the fields value.
init : function(application){
this.control({
"#orderListTbar button[name=searchBtn]" : {
click : function(){
orderFrom = Ext.ComponentQuery.query('#orderListTbar [name=order_from]');
console.log(orderFrom); // it return Object as well
console.log(orderFrom.value); // BUT, it return undefined!!!! #.#
}
}
});
},
anybody know what I did wrong?
and If you have found something wrong in my codes, please advice me.
Thank you!
You should use getValue method instead of value property. value is not listed in API.
Also notice that Ext.ComponentQuery.query returns array.
Another type of script is allowed as follows:
orderFrom = Ext.ComponentQuery.query("[name=order_from]",orderListTbar);
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'
}
]
}
]
}
} );
How can I add a specialkey event to all fields of a from.panel? In this form panel every field act on one method for searching my store my store name 'S01I009001',
Can anybody help me?
apology for my odd English.
Ext.define('${pkgName}.v01i009001.SV01I00900104' , {
extend : 'Ext.form.Panel',
alias : 'widget.sv01i00900104',
requires : ['Ext.form.field.Text'],
id : 'sv01i00900104',
padding : '0 0 0 0',
defaults: {
activeRecord : null,
border : true,
layout : 'hbox',
fieldDefaults : {
anchor : '100%',
labelAlign : 'right'
}
},
initComponent : function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
me = this;
me.items = [{
xtype : 'fieldcontainer',
combineErrors : true,
defaults : {
layout : 'fit',
margin : '3 5 1 5',
hideLabel : false,
labelAlign : 'top'
},
items: [{
xtype : 'numberfield',
name : 'id',
fieldLabel : 'REBATE ID:',
width : 100,
minValue : 0,
mouseWheelEnabled : false,
hideTrigger : true,
decimalPrecision : 0,
keyNavEnabled : false
},{
xtype : 'datefield',
name : 'endDate',
fieldLabel : 'End Date:',
flex : 1,
format : 'M d, Y',
altFormats : 'd/m/Y|M d, Y h:i A',
id : 'enddt-sv01i00900104',
vtype : 'daterange',
startDateField : 'startdt-sv01i00900104'
}]
}];
me.callParent(arguments);
}
});
I think this is your solution. If i right
init: function() {
this.control({'sv01i00900104 *' : {
specialkey: function (field, el) {
if (el.getKey() == Ext.EventObject.ENTER || el.getKey()==el.TAB){
this.filter()
}
}
}
});
},
filter:function(){
var form = Ext.getCmp('sv01i00900104').getForm(),
idValue = form.findField('id').getValue(),
endDate = form.findField('endDate').getValue(),
filters = new Array();
if(idValue){
filters.push({property:'id', value:idValue});
}
if(endDate){
filters.push({property:'endDate', value:endDate});
}
var store = Ext.data.StoreManager.lookup(storeName);
store.clearFilter();
store.loadPage(1, {
filters : array
});
}
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);
}
})]
}
});
When i press save button then its work fine. But I face some problem when i press enter on this field the error message is this.up(...).down(...) is null. My from window is given below.
I just want to, when you press enter on a textbox, it will act like you clicked the button.
Can anyone help?
Ext.define('${pkgName}.v01i002001.SV01I00200201' , {
extend : 'Ext.window.Window',
alias : 'widget.sv01i00200201',
id : 'sv01i00200201',
title : 'MANUFACTURE :: SV01I00200201',
minimizable : false,
maximizable : false,
autoShow : true,
resizable : false,
border : false,
modal : true,
padding : '0 5 0 5',
icon : "${resource(dir: 'images', file: 'APP01003.png')}",
layout : {
type: 'vbox',
align: 'stretch'
},
initComponent : function () {
var me = this;
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
this.items = [
{
xtype : 'form',
bodyStyle : {
padding : '10px',
border : true
},
tbar: Ext.create('Ext.ux.StatusBar', {
id : 'win-statusbar-sv01i00200201',
topBorder :true,
text :'Status',
defaultIconCls : 'info',
defaultText : 'Status'
}),
items : [{
xtype : 'textfield',
fieldLabel : 'Id',
name : 'id',
width : 265,
anchor : '95%',
emptyText : 'Not need...',
readOnly : true
},{
xtype : 'textfield',
fieldLabel : 'Manufac. Name',
emptyText : 'Write Manufacturer name',
allowBlank : false,
name : 'name',
width : 265,
anchor : '95%',
listeners: {
specialkey : function(field, e){
if (e.getKey() == e.ENTER || e.getKey()==e.TAB) {
//Ext.get('save-sv01i00200201').dom.click(); //it work
// this.up().up().down('button[action=save]').fireEvent('click'); //TypeError: button.up is not a function
// this.up('sv01i00200201').down('button[action=save]').fireEvent('click');//TypeError: button.up is not a function
// this.up('window').down('button[action=save]').fireEvent('click'); //TypeError: button.up is not a function
}
}
}
}]
}]
this.buttons = [
{
text : 'Save',
icon : "${resource(dir: 'images', file: 'SAV01004.png')}",
id : 'save-sv01i00200201',
action : 'save'
},{
text : 'Close',
icon : "${resource(dir: 'images', file: 'CLS01001.png')}",
scope : this,
handler : function(button){
var win = button.up('window');
win.close();
}
}]
me.callParent(arguments);
}
});
My controller given below
Ext.define('${pkgName}.C01I002001', {
extend : 'Ext.app.Controller',
requires: [],
views:[
'V01I001000',
'v01i002001.SV01I00200100',
'v01i002001.SV01I00200101',
'v01i001001.SV01I00200104',
'v01i001001.SV01I00200106',
'v01i002001.SV01I00200201',
'v01i002001.SV01I00200301'
],
refs : [{
ref : 'v01i002001',
selector: 'window'
}],
init: function() {
manuStore = Ext.data.StoreManager.get('S01I002001');
var me = this;
me.category = undefined;
me.control({
'sv01i00200201 button[action=save]': {
click : this.manufacturerSave
}
});
},
manufacturerSave : function(button){
win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
if(form.getForm().isValid()){
var manufacturer = Ext.create('${appName}.model.M01I002001',{
name:values.name
});
manufacturer.save({
scope:this,
success:function(records, operation){
var text = operation.response.responseText,
json = Ext.decode(text);
form.loadRecord(records);
controller000.statusbar('sv01i00200201', json.message, 'saveInfo', 'activecaption');
manuStore.load();
var win = Ext.getCmp('sv01i00200201');
controller000.closeWindow(win);
},
failure:function(model, operation){
controller000.statusbar('sv01i00200201', operation.error, 'warnInfo', 'red');
}
});
}else{
controller000.statusbar('sv01i00200201', 'Necessary Field Required', 'warnInfo', 'red');
}
}
});
this.up() bubbles up through only one level targeting the direct parent of your field (the form panel). Try one of these options instead :
this.up().up().down('button[action=save]').fireEvent('click');
this.up('window').down('button[action=save]').fireEvent('click');
this.up('#sv01i00200201').down('button[action=save]').fireEvent('click');
Take a look at the documentation ;)
Part 2 : "button.up is not a function"
I think I got it, you have to manually pass the button as an argument to the fireEvent function :
var button = this.up('window').down('button[action=save]');
button.fireEvent('click', button);
At last i do it by createing id like as
Ext.get('save-sv01i00200201').dom.click();
button modified and create id
{
text : 'Save',
icon : "${resource(dir: 'images', file: 'SAV01004.png')}",
id : 'save-sv01i00200201',
action : 'save'
}
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',
...
}