I made a bar column chart using ExtJs mvc. Now in the controller I want to add a function for click event to catch the selected value of the column. Here is my controller code:
Ext.define('Gamma.controller.ControlFile', {
extend : 'Ext.app.Controller',
//define the stores
stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
//define the models
models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
//define the views
views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],
init : function() {
this.control({
});
}
});
Please any one help me.
On chart:
listeners : {
itemmousedown : function(obj) {
this.fireEvent('itemmousedownchartbar',obj);
}
}
At final on chart defined, after this.CallParent():
this.addEvents('itemmousedownchartbar');
Now, on Controller:
'barChartView' : {
itemmousedownchartbar: this.function_to_call
}
Related
In my simple application I'm listening for the disclose event like this :
In the NotesList.js (view) file...
Ext.define("NotesApp.view.NotesList", {
extend : "Ext.dataview.List",
xtype : "noteslist",
...
config : {
onItemDisclosure : true, //adds the disclose arrow
}
});
NotesList is used in NotesListContainer which is an Ext.Container.
Then in NotesListContainer.js (view) ...
var notesList = {
xtype : "noteslist",
...
listeneres : {
disclose : { fn : this.onNotesListDisclose, scope : this }
}
};
this.add([topToolbar, notesList]);
The function does this :
onNotesListDisclose : function(list, record, target, index, evt, options) {
console.log(' onNotesListDisclose() called'); //nevers gets logged
this.fireEvent('editNoteCommand', this, record);
}
Then in Notes.js (controller) :
refs : {
//get elemets using xtype attr
notesListContainer : "noteslistcontainer",
noteEditor : "noteeditor"
},
//handlers for events
control : {
//define which events should this controller respond to
notesListContainer : {
//events fired by NotesListContainer
newNoteCommand : "onNewNoteCommand",
editNoteCommand : "onEditNoteCommand"
}
}
},
//Event/Command handler
onEditNoteCommand : function(list, record) {
console.log(' onEditNoteCommand called ');
this.activateNoteEditor(record);
}
I think the problem is in NotesListContainer.js where I am instantiating the list.
If I listen for the event in controller like this :
refs : {
//get elemets using xtype attr
notesListContainer : "noteslistcontainer",
notesList : "noteslistcontainer list",
},
//handlers for events
control : {
//define which events should this controller respond to
notesListContainer : {
//events fired by NotesListContainer
newNoteCommand : "onNewNoteCommand",
//editNoteCommand : "onEditNoteCommand"
},
notesList : {
disclose : "onEditNoteCommand" //adding it this way works...
}
}
It works just fine. However, I would prefer to work with a more application specific event instead of very generic disclose event.
I am new to sencha touch, any help is appreciated.
If you want to have your own custom business logic driven events, do the following:
Subscribe to necessary UI events in your main controller
Generate application wide business events
Subscribe to these events in your view controller
what you mean with 'a more application specific event'?
The disclose event is a list-component specific one:
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dataview.List-event-disclose
I have a window. and some fields in it (textfield and button). Now i want to submit these details.
I get this error:
TypeError: button.up("form").getValues is not a function
Button function
buClicked : function (button,record) {
var val= button.up('form').getValues();
console.log(val.textfieldValue);
}
My Widow Definition
Ext.define('MyApp.view.WindowForm', {
extend: 'Ext.window.Window',
alias: 'widget.winform',
id: 'winformid',
var val= button.up('form').getForm().getValues();
You are extending Window's class which is okay,but also add items config where ,you will include the xtype:form whose config has the the textfield and the buttons config something like this:
Ext.define('MyApp.view.WindowForm',
{
extend:'Ext.window.Window',
id:'myformvin',
items:[
{xtype:'form',items:[{xtype:'textfield',fieldLabel:'My name',name:'myname'}],
buttons:[{xtype:'button',text:'save',handler:function(btn){
var val = btn.up('form').getForm().getValues();
console.log(val); //to confirm that you have the values
}
}]
}
]
}
);
Attached is a my controller file .. i basically want to switch views .. adding and removing a panel in a container with 2 buttons .. in the method for home and popular button i am using Ext.create again and again wouldnt that overload my application becoz iam not destroying my views iam adding and removing them .. My main question is how can i create global var 's for this situation like i create var homepanel = Ext.create just once and then i can reuse that var when i want to remove or add it from my mainContainer.. need serious guidance on this .. searched the whole documention but i dont have any clue about it
Ext.define('app.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
refs: {
homeBtn: '#homeBtn',
popularBtn: '#popularBtn',
homePanel: '#homePanel',
mainContainer: '#mainContainer'
},
control: {
homeBtn:{
tap: 'homeBtnAction'
},
popularBtn:{
tap: 'popularBtnAction'
}
}
},
launch: function(app) {
this.callParent(arguments);
console.log("main launched");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
mainCont.add(homepanel);
console.log("homePanelAdded");
},
homeBtnAction: function(){
console.log("home page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(popularpanel);
mainCont.add(homepanel);
},
popularBtnAction: function(){
console.log("popular page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(homepanel);
mainCont.add(popularpanel);
}
});
NOTE: Iam using Ext.define to create my views and using MVC structure.
Use this,
var homepanel = this.getHomePanel() || Ext.create('app.view.Home.HomePanel');
if this.getHomePanel() does not return anything it'll create the panel for you. After that you'll use the already created panel.
Other note, unless you are manipulating the buttons in some manner there is no need to give them an id or a ref.
Set up your button in your view like so
{
xtype : 'button',
text : 'Home Panel',
action : 'goHome'
}
then in the control section of your controller use this
'button[action=goHome] :
{
tap: 'homeBtnAction'
}
One option is : in "launch", you create both views (with Ext.Create) and use Ext.getCmp in action button callbacks to retrieve the previously created views.
I building my ExtJS 4 application following the MVC structure. I want to make an extendable grid MyGrid with some functionality that I can reuse several times. Therefore, I guess, it should have its own controller which is also extended, so that the functionality is inherited. How is this properly done?
In the code below I illustrate how I extend the controller MyGrid with MyExtendedGrid. I realize that I'm overriding the init function in the MyGrid controller, so that it is never called. Is the problem simply solved by calling the "super" init in MyGrid from MyExtendedGrid init, or merge the control objects? Is that the proper way to do this in the MVC spirit? If so, how?
controller/MyGrid.js :
Ext.define('App.controller.MyGrid', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'myGridView',
selector: 'mygrid'
}
],
init: function() {
var me=this;
me.control({
'mygrid textfield[name=searchField]': {
change: function() {
var view = me.getMyGridView();
// Do something with view
}
}
});
}
});
controller/MyExtendedGrid.js :
Ext.define('App.controller.MyExtendedGrid', {
extend: 'App.controller.MyGrid',
views: [
'grids.MyExtendedGrid'],
refs: [
{
ref: 'myExtendedGridView',
selector: 'myextendedgrid'
}
],
init: function() {
var me=this;
me.control({
'myextendedgrid': {
// Some control code
// Using getMyExtendedGridView()
}
});
}
});
view/grids/MyGrid.js :
Ext.define('App.view.grids.MyGrid', {
extend: 'Ext.grid.Panel',
alias : 'widget.mygrid',
requires: [
],
store: '', // Not defined here
columns: [ ], // Not defined here
initComponent: function() {
var me = this;
me.tbar = [
'Search',
{
xtype: 'textfield',
name: 'searchField',
hideLabel: true,
width: 150
}
];
me.callParent(arguments);
}
});
view/grids/MyExtendedGrid.js :
Ext.define('App.view.grids.MyExtendedGrid', {
extend: 'App.view.grids.MyGrid',
alias : 'widget.myextendedgrid',
store: 'MyStore',
columns: [
// ...
],
initComponent: function() {
var me = this;
me.bbar = [
//...
];
me.callParent(arguments);
}
});
It's actually a bit trickier...
Here is what we did in our application (we have exact same situation - some kind of base controller, that is reused in many different places)
Keep init function in base controller.
Define common base method in this base controller (like gridRendered - where you need to do something for all controllers all the time).
Subscribe to the events in all child controllers but subscribe events using methods of base controller. It won't work otherwise - base controller doesn't have proper refs to properly subscribed to events.
I can post couple source snippets, but I think it's pretty straightforward.
Ok, after some thinking I decided on the following solution, which has the advantage that mygrid does not need to know about myextendedgrid.
I extend my gridview as in the question.
I gave the base grid its own controller for doing common functionality, for instance deleteButton.setDisable(false) when something is selected in the grid.
Next, I remind myself that using refs:[ (for instance with selector: 'mygrid') would ambiguously point to both instances of the base class any extended instances. When using me.control({ I instead get the relevant grid by traversing from the activated element using up:
me.control({
'mygrid textfield[name=searchField]': {
change: function(searchfield) {
var grid=searchfield.up('mygrid'); // (mygrid or myextendedgrid!)
// Do something with view
}
}
...
The extended grid I give its own controller and here I could use refs. I don't extend the controller from the MyGrid class (but rather from 'Ext.app.Controller'), unless I would like to use functions or variables from the MyGrid controller. All the controllers are started from app.js using:
Ext.application({
controllers: [
'MyGrid'
'MyExtendedGrid',
],
...
In order to get the grid when rows are selected in the grid, I stored the grid in the selection model as below:
In controller/MyGrid.js :
me.control({
'mygrid': {
afterrender: function(grid) {
var selModel=grid.getSelectionModel();
selModel.myGrid=grid;
},
selectionchange: function(selModel, selected, eOpts) {
var grid=selModel.theLookupGrid;
// Do something with view
}
...
I have a dataview that I would like to detect a swipe on. It'd be great if I could listen for that in the controller, but as far as I understand I can't do that. My testing bears this out. So instead I need to listen in the view for the event. Currently I'm doing that in the initialize method of my data view like so:
initialize: function() {
var el = Ext.get("list");
el.on('swipe', function(event) {
alert(event.direction);
});
}
So a couple of things:
Is my understanding correct, that I have to listen for DOM events like this in the view?
Is this the best way to set the swipe listener on the dataview? I couldn't seem to make it work through the config object.
How do I then let my controller know about the swipe? It will need to manipulate the view when the swipe happens (like change the view size). What are the best practices in this area?
Thanks in advance.
It is always better to put the events for a component inside the controller. So, first create a ref for that dataview in your controller.
refs : {
listView : 'list' //Or a selector to get the reference
},
control : {
listView : {
// Dataview has an "itemswipe" event - not "swipe" event
itemswipe : function(dataview, index, target, record){
//Do here what you want
}
}
}
This should work (not tested).
I think this is what you are after, its the same idea just changing the scope to the controller:
Ext.define('app.controller.myListControler', {
extend: 'Ext.app.Controller',
config: {
refs: {
list: { selector: 'myList', autoCreate: true, xtype: 'myList' }
}
},
init: function () {
},
launch: function () {
this.getList().on('swipe', this.onSwipe);
},
onSwipe: function (event) {
console.log(event.direction);
}
}