I'm just beginning with Extjs 4, and I need to get the selected value of a combobox to change stores and rendering a chart corresponding to the data of each store.
I'm using the MVC model, here's my view containing comboboxes :
Ext.define('Metrics.view.Params', {
extend: 'Ext.grid.Panel',
alias: 'widget.params',
title: 'Select Parameters',
hideHeaders: true,
initComponent: function() {
this.columns = [{
dataIndex: 'name',
flex: 1
}];
this.dockedItems = [{
xtype: 'container',
items: [{
xtype: 'combobox',
id : 'cmbGraph',
mode : 'queryMode',
name : 'graph',
fieldLabel: 'Graph',
store: ['Small data','Big data'],
editable : false
},
{
//another combobox here..
}]
And my controller is :
Ext.define('Metrics.controller.RenderGraph', {
extend: 'Ext.app.Controller',
refs: [{
ref : 'params',
selector : 'params'
}],
stores: ['GraphData'],
init: function() {
// Start listening for events on views
this.control({
'paramsbtn button[action=apply]': {
click : this.launchChart
}
});
launchChart : function(button){
var params = this.getParams();
var combo1 = params.items[cmbGraph];
console.log(Ext.encode(combo1));
var v = combo1.getValue();
var r = combo1.findRecord(combo1.valueField || combo1.displayField,v);
return(combo1.store.indexOf(r));
console.log('combo item' + r + 'selected');
}
As you can see, I'm trying to get the value of the combobox with the ID = cmbGraph, but it's not working, the error message I get is :
Uncaught TypeError: Cannot call method 'getValue' of undefined
It's complicated with Extjs 4 because I have to get to an element of a view with my controller.
Any help would be much appreciated.
You could also keep the refs so you can reuse them if you need to and use something like this if you wanted:
refs: [{
ref : 'graph',
selector : 'params > container > combobox'
}],
or
refs: [{
ref : 'graph',
selector : 'params #cmbGraph'
}],
or even straight:
refs: [{
ref : 'graph',
selector : '#cmbGraph'
}],
These should all give you the same reference to the combobox. Just depends on how you arrange your code.
var comboValue = me.getGraph().getValue();
Related
When I click on a tree record, I try to set the values of this record and set these values in the form.
In the eventcler itemclick: this.showDataFields function is triggered:
....
showDataFields: function(view, record, item, index, event) {
//got a form with fields
var panel = view.up('maintab');
console.log(panel)
//var formfield = panel.down('actionform');
//assign values from selected record to form fields
//formfield.loadRecord(record);
},
..........
In this function, view.up ('maintab') is underfined.
The maintab is Ext.tab.Panel which houses the tree.
Why can not get the topmost container and how to do it correctly?
Made an example in fiddle
thank
You should use view.up('treepanel').nextSibling().getForm().setValues(record.data) in your showDataFields function to set these values in the form.
You could have provided a better example, therefore within the limitations that were proposed.
The answer I got was this were the changes in the ActionFormTree class that got the code below:
Ext.define('Fiddle.view.ActionFormTree', {
extend: 'Ext.form.Panel',
alias: 'widget.actionformtree',
xtype: 'actionform',//mainform,
initComponent: function(){
var me = this;
Ext.apply(me,{
items: [{
xtype: 'form',
border: false,
anchor: '100%',
height: 100,
layout: {
type: 'vbox',
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'textfield',
name: 'text',
fieldLabel: 'Наименование',
itemId: 'name_field',
}, {
xtype: 'textfield',
name: 'code',
fieldLabel: 'Код',
itemId: 'code_field',
}]
}],
buttons: [{
text: 'Save Changes',
scope: me,
handler: function (button) {
//Эта панель со значениями полей
form = me.down('form');
var mainpanel = me.up('#maincontainer');
var treeform = mainpanel.down('usertree');
var sel = treeform.getSelectionModel().getSelection()[0];
store = treeform.getStore();
console.log(treeform)
store.suspendAutoSync()
var child = sel.set({
text: 'Измененное',
leaf: true
});
sel.expand()
store.resumeAutoSync();
//var currRecord = form.getRecord();
//if (currRecord) {
// form.updateRecord();
// form.reset();
//}
}
}]
});
me.callParent(arguments);
}
});
So, in this example, for it to work, you will need to have a node selected to work.
Hope it helps and finalize your question.
Sample to your code
when i write code direct in my view .the list success display in my tabpanel's tab.look the view underneath
{
xtype: 'tabpanel',
itemId: 'tabfirst',
flex: 1,
//activeItem: 1,
tabBar: {
layout: {
pack: 'center'
}
},
items: [
{
title: 'tab1',
xtype: 'list',
itemTpl: '{title}',
data: [
{title : 'title1'},
{title : 'title2'},
{title : 'title3'}
]
},
{
title: 'tab2',
html: 'here second html2'
}
]
}
but it not success in my controller. there is nothing in my tab.
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
launch: function(){
var moneytab = Ext.ComponentQuery.query('.makemoney #tabfirst')[0];//--get my tabpanel
var titlestor = Ext.create('ylp2p.store.loanlist');//---get my store
titlestor.load({
callback: function(records, operation, success){
Ext.each(records, function(record){
var loanname = record.get('loanname');
var myPanel = Ext.create('Ext.Panel',{
//the code is same in my view but not work
title: loanname,
xtype: 'list',
itemTpl: '{title}',
data: [
{title : 'title1'},
{title : 'title2'},
{title : 'title3'}
]
});
moneytab.add([myPanel]);
//add above panel
});
}
});
}
});
when i add only "title" and "html" in panel,it work. then i change it to list.it success in direct write in view. but it not work write it direct in controller.
Use this code to add List. It will work.
var myPanel = Ext.create('Ext.List', {
//the code is same in my view but not work
title: loanname,
itemTpl: '{title}',
data: [
{ title: 'title1' },
{ title: 'title2' },
{ title: 'title3' }
]
});
moneytab.add([myPanel]);
As I don't have enough reputation to comment, I am posting this as answer:
Did you try giving your view fullscreen: true config and also did you include your Controller in the Ext.app.Application list of controllers?
I am looking for a tutorial / sourcecode for a sencha touch list with a model and a store. I am facing some issues with Sencha Touch 2.2.1.
Model:
Ext.define("DeviceAPIFramework.model.OfferModel", {
extend: "Ext.data.Model",
config: {
fields: [
{ name: "description", type: "string" },
{ name: "id", type: "string" }
]
}
});
Store:
Ext.define("DeviceAPIFramework.model.OfferStore", {
extend: "Ext.data.Store",
config: {
storeId: "offerStore",
model:'DeviceAPIFramework.model.OfferModel'
}
});
Controller:
offerStore.add({description: 'test', id: 'my id'});
Ext.ComponentQuery.query('#offersListHomeView')[0].update();
View:
Ext.require("DeviceAPIFramework.model.OfferStore");
var offerStore = Ext.create("DeviceAPIFramework.model.OfferStore");
Ext.define ...........
{
xtype: 'list',
width: Ext.os.deviceType == 'Phone' ? null : 1200,
height: Ext.os.deviceType == 'Phone' ? null : 350,
title: 'test',
itemId: 'offersListHomeView',
store: offerStore,
itemTpl: '{description} {id}'
}
Image:
After executing the code from the controller, a new row gets appended, but also a weird undefined text on the upper left corner of my list. Any suggestions how to fix this issue?
I also don't like the variable offerStore outside the view. If I put it in the controller, the view is nagging.
The undefined is coming from this line:
Ext.ComponentQuery.query('#offersListHomeView')[0].update();
update is decrapted(I wrote it, because I was developing once with an old Sencha Touch version and this update was necessary) and will call setHtml(), because we are passing no arguments it is settings "undefined", which will be shown in our view. In the new sencha version, you can simply delete this line.
I also managed the global store problem with this code in the controller:
launch: function() {
this.offersStore = Ext.create('Ext.data.Store', {
model: 'DeviceAPIFramework.model.OfferModel'
});
Ext.ComponentQuery.query('#offersListHomeView')[0].setStore(this.offersStore);
},
I'm trying to select multiple objects (2 labels & 2 textfields) that are located in a panel. I gave these components a property (changeVisibility: true).
So the thing i'm trying to accomplish here is quite simple: when the user checks the checkbox, all the components with the property (changeVisibility:true) should become invisible. So in my controller i'm trying to select these components but i'm unable to accomplish this thusfar.
Help is much appreciated!
Code of my panel:
Ext.define('Edocs.view.wizard.card-2.content.mobile-password.Panel', {
extend : 'Ext.FormPanel',
alias : 'widget.mobilePassword',
layout : {
type : 'vbox',
pack: 'center'
},
bodyStyle:{"background-color":"beige"},
border:false,
defaults:{
width: '100%'
},
items: [{
xtype : 'checkboxfield',
boxLabel : 'Enable mobile (iphone) accesibility',
boxLabelAlign : 'before',
name : 'enableMobile',
inputValue : '1',
id : 'cbxMobile',
itemId : 'cbxMobile'
},{
xtype: 'label',
text: "Please enter a password to connect to the platform by mobile (iphone/ipad)",
style: 'font-weight:bold;',
changeVisibility :true
},{
xtype: 'textfield',
name: 'mobilePassword',
id: 'txtMobilePassword',
inputType: 'password' ,
changeVisibility :true
//width: '100%'
},{
xtype: 'label',
text: "Confirm password",
style: 'font-weight:bold;',
changeVisibility :true
},
{
xtype: 'textfield',
name: 'mobilePasswordConfirm',
itemId: 'txtMobilePasswordConfirm',
inputType: 'password' ,
vtype: 'password',
initialPassField: 'txtMobilePassword',
changeVisibility :true
}],
initComponent : function() {
Ext.apply(this, {})
this.callParent(arguments);
}
});
This is the function in my controller (this function is called on the change event of the checkbox):
addMobilePassword : function(checkbox) {
var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
if (checkbox.checked){
for (var i in items){
items[i].setVisible(false);
}
}
}
I'm having troubles with this selector:
var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
If anyone could give me some advice on how to select these components.
Thanks!
down() will find the first matched descendant of the container. So I think you should try:
checkbox.up().down('mobilePassword').query('label[changeVisibility], textfield[changeVisibility]')
or briefer
checkbox.up().query('label[changeVisibility], textfield[changeVisibility]')
Try query('[changeVisibility=true]')
I am developing an application in which when submit button is clicked in the form, it should go to a different screen. However it is just printing the results outside of the window and not really going to a new screen. I have hardcoded the store to make sure there is data when I start the application and it still prints it outside of the viewable area.
Here is my Ext.data.Store:
var store = new Ext.data.Store({
model: 'jobSummary',
storeId: 'jobStore',
data : [{title: 'This is test'},
{title: 'This is test2'},
{title: 'This is test3'}]
});
Here is the list that I am using it in:
SearchJobsForm.jobsList = Ext.extend(Ext.Panel, {
dockedItems : [ {
xtype : 'toolbar',
title : 'WTJ',
dock : 'top',
items : [ {
xtype : 'button',
text : 'Back',
ui : 'back',
handler : function() {
//back button controller
},
scope : this
} ]
} ],
items : [ {
xtype : 'list',
emptyText : 'No data available.',
store : 'jobStore',
itemTpl : '<div class="list-item-title">{title}</div>'
+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure : function(record) {
},
grouped : false,
scroll : 'vertical',
fullscreen : true
} ],
initComponent : function() {
SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
}
});
And i am calling this list panel from my submit button handler which is:
var jobsList = new SearchJobsForm.jobsList();
The full code I have pasted on this link for better visibility:
http://pastebin.com/a05AcVWZ
Ok,
SearchJobsForm.form is your main panel, it will contains two components a searchForm (with text/select input) and a panel/list of results.
In the callback, we will hide() the form and show() the results list. This is not a clean code, but the simpliest and kissest one I can get from yours.
First let's instantiate the jobsList
// It has the id ( id: 'jobsListId')
var jobsList = new SearchJobsForm.jobsList();
then you should put all your inputs into a form (xtype : formpanel,
id: 'searchFormId')
And add the resultPanel just after the form
Here is the code
SearchJobsForm.form = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this, {
id: 'searchForm',
floating: true,
width: 250,
height: 370,
scroll: 'vertical',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [
{
xtype: 'formpanel', // 1. this is the added formpanel
itemId: 'searchForm',
id: 'searchFormId', // this id is important
items: [
{
xtype: 'textfield',
...
}, {
xtype: 'textfield',
...
},
// all your inputs
]
},
// 2. add here the results panel : jobsList
jobsList
], // the code continues inchanged
dockedItems: [{
...
- Finally we will modify the ajax callback to hide/show the panels. Do not remove one of them, elsewhere you won't be able to reset your form
// here it comes
Ext.util.JSONP.request({
url: "http://"+serverAdd+":"+ port+"/users/searchresults.json",
format: 'json',
callbackKey: 'callback',
params : searchCriteria,
callback: function(data) {
console.log('callback');
// Call your list-filling fonctions here
// jobsList.fill(data);
Ext.getCmp('searchFormId').hide();
Ext.getCmp('jobsListId').show();
},
failure: function ( result) {
console.error('Failed');
}
});
For your next projects, I recommend you to work with classes and namespaces to avoid 1000 lined files ; Ext.ns() is your best friend and will avoid you a lot of headaches.