Controller
if(rec.data.category == "TestLinksList") {
/* Assign new store before loading view */
/* ----- Start: Code not working ----- */
var testStore = Ext.getStore('linksStore');
testStore.load();
/* ----- End: Code not working ----- */
};
this.getHome().push({
xtype : rec.data.category,
// Assign testStore here
});
The above function is invoked on tap of a list item. If the category is 'TestLinksList' then I have to assign a new store and display and display the view using 'push' method.
Can anyone please let me know how to assign the store for the view in controller.
You could just to this (assuming your xtype extends Ext.List):
this.getHome().push({ xtype: rec.data.category, store: testStore });
Related
I have a card layout, Inside card there are many panels inside card items.
I want some listener which will be fired as soon as panel inside card layout is visually activated.
i was trying to achieve the same with Activate and show event,but i am not getting desired output.
One approach would be to write a controller that references all the views, if you are using the MVC pattern:
Ext.define('MyApplication.controller.PanelsController', {
extend : 'Ext.app.Controller',
itemId : 'panelsController',
views : [
'Panel1',
'Panel2' // etc...
],
init : function (application) {
this.control(
{
'panel#panel1' : {
show : this.myListener
}
});
},
myListener : function () {
// do stuff here.
}
});
I am not able to get combobox value in a controller. The getter method of combobox view returns
function i(){
return this.constructor.apply(this,arguments)||null
}
instead of view object instance. If I use
var combo=this.getColumnTypeComboView().create()
then I don't get selected value of the combobox combo.getValue().
To get view reference in a controller simply use getView() method from the Controller class. To create a connection between view and a controller make sure that you follow MVC aplication architecture principals, found here
var view = this.getView('Contact'); //=> getView( name ) : Ext.Base
if a combobox is a item of a view that your controller is in charge off, then use control method also from Controller class.
Ext.define('My.controller.Contact', {
extend: 'Ext.app.Controller',
views: ['Contact'],
init: function() {
//reference the view
var view = this.getView('Contact');
//reference the combobox change event
this.control({
'mywin combobox': {
change: this.onChangeContinent
}
});
},
onChangeContinent:function (field, value, options) {
//here you can get combobox component and its value
Ext.Msg.alert('Continent', value);
}
});
here is a fiddle example
EDIT:
To reference one component from another, you can use Controller ref method, like this:
refs: [{
ref: 'combo',
selector: 'mywin combobox'
}]
here is a fiddle example 2
I have a grid within a window. The grid has 3 Actions: Edit, Delete and Disable.I was wondering if it is possible to make the text of the Disable Action (which is currently 'Disable/Enable') to be dependent on the Current Status of the record selected. So say the user selects a record whose Current Status is Enabled, then the action's text should be 'Disable'. If, however, the user selects a record whose status is Disabled, then the action's text should be 'Enable'. Is it possible to do this when using Action? Or do I need to use a button instead of Action?
I am assuming your action button is in a toolbar that is docked to the top of your grid panel. The only tricky thing is getting a reference to the grid (without hardcoding it). The grid's 'select' event only gives you a reference to the rowmodel used.
/* Set a action attribute on the Ext.Action so we can find it */
var action = new Ext.Action({
text: 'Do something',
handler: function(){
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something',
itemId: 'myAction',
action: 'myAction' // I don't like itemId's personally :)
});
/* In the Controller */
init: function() {
this.control({
'mygrid': {
select: this.onRecordSelect
}
});
},
onRecordSelect: function(rowModel, record) {
var grid = rowModel.views[0].ownerCt);
var action = grid.getDockedItems('toolbar[dock="top"]')[0].down('button[action="myAction"]');
var enabled = (record.get('CurrentStatus') == "Enabled");
action.setText(enabled ? 'Disable' : 'Enable');
action.setIconCls(enabled ? 'myDisableCls' : 'myEnableCls');
}
/* in SASS */
.myDisableCls{
background-image:url(#{$icon_path}/checkbox.png) !important;
}
.myEnableCls {
background-image:url(#{$icon_path}/checkbox_ticked.png) !important;
}
Good luck!
I solved the problem in another way. This is my code:
grid.getSelectionModel().on({
selectionchange: function(sm, selections) {
if (selections.length > 0) {
Edit.enable();
Delete.enable();
if(selections[0].data.CurrentStatus == "Disabled"){
Disable.setText("Enable");
Disable.enable();
}else{
Disable.setText("Disable");
Disable.enable();
}
} else {
Edit.disable();
Delete.disable();
Disable.disable();
}
}
});
I have a backend that returns some JSON data that is used by my datastore through an ajax proxy. The data is then displayed in a dataview. What I need to do is perform some transformation on the received data on client side before it is displayed by the dataview.
I tried various approaches and settled on attaching a handler to the datastore's load event:
Ext.getStore('MyStore').on('load', function (store, records, successful, operation, eOpts) {
for (var i = 0; i < records.length; i++) {
var e = records[i];
e.data.myField = "constantPrefix" + e.data.myField;
}
});
The handler fires and records are changed correctly.
Problem is, the dataview still shows unchanged data. Is the whole approach correct? If so, why's it not working; if not - how would you achieve that?
Below is the dataview code:
Ext.define('MyProject.view.MyDataView', {
extend : 'Ext.DataView',
xtype : 'my-dataview',
config : {
store : 'MyStore',
baseCls : Ext.os.deviceType === 'Phone' ? 'my-dataview-phone' : 'my-dataview-tablet',
mode: 'MULTI',
allowDeselect: true,
selectedCls: 'tick-visible',
triggerEvent: 'itemdoubletap',
itemTpl : [
'<img class="my-photo my-dataview-photo" src="',
'{myField}"></img>'
].join('')
}
});
instead
e.data.myField = "constantPrefix" + e.data.myField;
use
var value = "constantPrefix" + e.get('myField');
e.set('myField', value);
model.set() is responsible to trigger necessary events, which the dataview does catch.
cheers, Oleg
You just need to inform the store listeners about the modified fields. Try:
Ext.getStore('MyStore').afterEdit(e, ['myField']);
This has the advantage, that the dataview or grid will now show the fields as modified (with these red triangles in the field).
I have a simple test app where I have a carousel that will instantiate multiple of the same type of grid, each grid having it's own copy of a store.
Carousel:
Ext.define('App.view.TopPageCarousel', {
extend: 'Ext.Carousel',
xtype : 'app-toppagecarousel',
requires: ['Ext.Carousel', 'App.view.TopPageGrid'],
config: {
title: 'Top Pages',
items: [{
xtype : 'app-toppagegrid',
title : 'titleA'
},{
xtype : 'app-toppagegrid',
title : 'titleB'
}]
}
});
At first I was defining the store in the grid as a property in its config and I have the controller listening for store changes, just to let me know it was being loaded. The ajax call is made and the grid was populated. However, All grid's were populated with the same data even though unique data was being returned with each call.
Then I found a post that said I needed to instantiate the stores as the grid is being populated, like so:
constructor : function() {
var me = this;
Ext.apply(me, {
store : me.buildStore()
});
me.callParent(arguments);
me.store.load({params : {ufq : this.title}});
},
buildStore : function() {
return Ext.create('App.store.Links');
}
This sort of works. The ajax call is being made, but the grid isn't being populated now and I am not seeing the console.log("Store loaded"); being executed that I placed in the controller. What am I doing wrong?
It turns out in ST2 instead of using Ext.create, the best thing to do is (in my particular instance, not as a standard):
constructor : function() {
this.callParent(arguments);
Ext.setStore('App.store.Links');
},
Using Ext.getStore & Ext.setStore are necessary now if you want a lot of the benefits that go along with events & the store manager.