How to do the same without using Ext.getCmp in this code? - javascript

This is the code im using and im firing button click event once the window show event is called. this works fine. but how to do the same without using Ext.getCmp
this is the line
Ext.getCmp('recent_refresh').fireEvent('click');
this is the code
Ext.create('widget.window', {
title: 'Activity',
closable: true,
closeAction: 'hide',
width: 250,
height: 300,
bodyBorder: true,
tbar: {
xtype: 'toolbar',
ui: 'plain',
items: [{
iconCls:'refresh',
id: 'recent_refresh',
listeners: {
click: function(){
Ext.Ajax.request({
url: 'control.php',
params: {
'case': '18'
},
success: function(response){
var json = Ext.decode(response.responseText);
}
});
}
}
},
'->',
{
xtype: 'displayfield',
name: 'act_date',
id: 'act_date',
value: new Date(),
formatValue: Ext.util.Format.dateRenderer('Y-m-d')
}]
},
layout:'accordion',
border: false,
items: [ grid1, grid2, grid3 ],
listeners: {
show: function() { Ext.getCmp('recent_refresh').fireEvent('click'); }
}
}).show();
Regards

There are many ways to do this. One way is to make an assignment with the Ext.create call since Ext.create returns such a reference. The app namespace in the example below is a filler since any namespaces you are using are unknown from your text. Once you have the variable reference to the widget, you can get use it to get a reference to the top toolbar and then get a reference to the item you want inside of the toolbar.
Ext.ns('app');
app.activityWin = Ext.create('widget.window', {...}
app.activityWin.getTopToolbar().get('recent_refresh').fireEvent('click');

Use the ref property.. I don't know if it has been carried forward to Ext JS 4, but here's how we do it in Ext Js 3.3
var win = new Ext.Window({
..config..
buttons : [{
text : 'save'
ref : 'saveButton'
}],
listeners : {
show : function(win){
win.saveButton.fireEvent('click'); //saveButton here is the same as used in ref above.
}
}
});
ref can now been used directly and no need to use Ext.getCmp
check the correct usage of ref in your case and implement it..
Cheers.

Related

Kendo UI Grid: if I make changes and save them, I can still cancel them afterwards. How to lock them in?

I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!
You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.

Extjs 5 strange behavior of the getStore() method

I've faced with the strange getStore() method behavior.
Having main viewport with two regions: north and center. On the north region there is a button 'Show grid', if to click on this button QueryResultsGridView is loaded to the center region
var panelToAddName = Ext.create('MyApp.view.QueryResultsGridView', {});
var mainViewPort = Ext.getCmp('mainViewPort');
var centerRegion = mainViewPort.down('[region=center]');
centerRegion.removeAll();
centerRegion.add(panelToAddName);
my Store
Ext.define('MyApp.store.QueryResultsGridStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.QueryResultsGridModel',
alias: 'store.queryResultsGrid',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'queryResultsGrid.json',
reader: {
type: 'json'
}
}
});
my ViewModel
Ext.define('MyApp.viewmodel.MainViewModel', {
extend: 'Ext.app.ViewModel',
requires: [
'MyApp.store.QueryResultsGridStore'
],
alias: 'viewmodel.main',
stores: {
queryResultsGrid: {
type: 'queryResultsGrid'
}
});
my Panel
Ext.define('MyApp.view.QueryResultsGridView', {
extend: 'Ext.Panel',
requires: [
'MyApp.controller.QueryResultsGridViewController'
],
controller: 'queryResultsGrid',
listeners: {
afterrender: 'onFormAfterRender'
},
items:[{
reference: 'queryResultsGrid',
layout: 'fit',
items: [
{
xtype: 'grid',
reference: 'grid',
bind: {
store: '{queryResultsGrid}'
},
columns: [
{ text: 'Text1', dataIndex: 'text1', flex: 1 },
{ text: 'Text2', dataIndex: 'text2', flex: 3 }
]
}]
}]
});
my ViewController
Ext.define('MyApp.controller.QueryResultsGridViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.queryResultsGrid',
onFormAfterRender: function(form, parent1) {
console.log(form.down('grid'));
console.log(form.down('grid').store);
}
});
Now in console I see 2 Objects as suggested above. If I go inside the first Object there is a data inside it, but inside the second one store is empty. Could anyone suggest me why? Btw I need this store to run store.load().
first Object
second Object
UPDATED
Here is https://fiddle.sencha.com/fiddle/kf3/preview if it helps, you can see in the console 2 Objects I mentioned above. Source code is available here https://fiddle.sencha.com/#fiddle/kf3
You can use the Ext.getStore() method to get any store
Is it because you have the store set to autoLoad? The store object changes from one moment to another and I wonder if due to autoLoad being set to true is causing data to be overwritten. Try removing autoLoad or setting it to false.
If this doesn't work, you could try setting up a Sencha Fiddle so we can see this in action.
I've finally figured it out. This problem is not occur if to set afterrender event for the grid (not for the panel itself) and use this.getViewModel().getStore('queryResultsGrid') as was suggested by Colin in the comments.
I've updated the Fiddle.

Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager

I have did one common view, this view is required in all the pages. so wherever i need, i am calling this view of xtype . Within this common view have some components with defined by id value.
As per requirement depends on pages i need to hide some button from common view again need to show. These activities will come depending on pages. While first launching time screen will come. once i navigating to another page it will show error like Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager.
If i changed componets id value to name value or itemId value. then it will navigate fine but problem is not able to hide and show the buttons because showing undefined sysntax is var a = Ext.getCmp('btnBackID'); console.log(a);, it will be undefined. once the component returns as object, i can do hide show functionality.
Can any one tell how resolve this issue else give me alternate ways to achieve. great appreciate. Thank you. i have given my code below
Common View
Ext.define('abc.view.GlobalNavigationView', {
extend:'Ext.panel.Panel',
alias:'widget.globalNavigationView',
id:'globalNavigationId',
layout: {
type: 'vbox',
align:'stretch'
},
items:
[
{
xtype: 'toolbar',
layout: 'hbox',
flex: 1,
items:
[
{
xtype: 'button',
flex: .1,
text: 'Back',
id: 'btnBackID',
},
{
xtype: 'button',
flex:.1,
id: 'btnSave',
cls: 'saveCls'
},
{
xtype: 'button',
flex:.1,
id: 'btnEmail',
text: 'Email'
},
{
xtype: 'button',
flex:.1,
id: 'btnPrint',
text: 'Print'
},
{
xtype: 'button',
flex:.1,
itemId: 'btnFilter',
text: 'Filter'
},
{
xtype: 'button',
flex:.1,
id: 'btnLogout',
cls: 'logoutCls'
}
]
}
]
});
HomeView1
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly1',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
.........................
}
]
});
HomeView2
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly2',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
-----------------------
}
]
});
Controller Code:
init:function(){
this.control({
'globalNavigationView ':{
click:this.onbtnBackClick,
render: this.onbtnBackrender,
},
'weeklyfcastView':{
show:this.onShowweeklyfcastView,
render:this.onRenderweeklyfcastView
}
});
},
onShowweeklyfcastView: function(){
var btnFilter = Ext.getCmp('btnFilter');
console.log(btnFilter); // if i used components id to name or itemId, here will show undefined
btnFilter.setHidden(true);
//btnFilter .hide();
}
If your view is not a singleton, you cannot give IDs to its components - IDs must be unique, or you get the duplicate id error.
What you really need is some reference to the view from which you are trying to show/hide buttons. When you have that reference, you can use the down method to find your buttons. For example:
var iPanel = // Create new panel here.
iPanel.down('button[text="Email"]').hide();
This code works in EXTJS 6 for multiple buttons in the same view, having the same itemId (not id - ids will throw an error, as noted above)
View:
{
xtype : 'button',
text : 'Save and Come Back Button 1',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
{
xtype : 'button',
text : 'Save and Come Back Button 2',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
Controller:
this.__setButtons('#saveAndComeBackButton','disable');
__setButtons: function (buttonItemId,state) {
Ext.Array.forEach(
Ext.ComponentQuery.query(buttonItemId),
function (button){
if (state === 'enable'){
button.enable();
}else{
button.disable();
}
}
);
}

Second time binding fails with KoGrid when ViewModel is used with constructor pattern

I am using KoGrid for my data binding. and the following code seems to work all great:
var ViewModel = {
prizeCollection : ko.observableArray;
}
Then bind it somewhere in code with PrizeCollection(data); and it works all great when I use it in the templates like following:
<div data-bind="koGrid: { data: PrizeFulfilmentStatuses , columnDefs: [ { field: 'Description', width: 140 },
{ field: 'Order', width: 100, headerClass: 'specialHeader' },
{ field: 'ColorHex', width: 150,cellTemplate: 'editTemplate' },
{ field: 'Editable', width: 180, cellClass: 'specialCell' },
{ field: 'ID', width: 170 }, { field: 'Who', width: 170 }],
autogenerateColumns: false,
isMultiSelect: false,
enablePaging: true
} "></div>
It's all great. I can bind it once and I can bind it multiple times when new data comes from the server and it seems to work all great.
Now, when I make my ViewModel some soething like following:
ViewModel = function(){
var PrizeCollection = ko.observableArray();
}
and use it in conjunction with the same template on the HTMl, the first time data load is not a problem at all. But second time when I load it, the browser gets hung and when I look into firebug, it gives me following error:
data.column is not defined.
Basically data.column is empty.
I am not sure why it is having problem with the same data. I also tried unbinding with
ko.cleanNode(document.getElementById("KoGridContainer"));
That was not that helpful either
Any suggestions?

Ext4 reload tree

I am newbie to EXT and I am having problem with reloading EXT 4 tree. I have been trying with:
Ext.tree.getLoader().load(tree.root);
Ext.tree.load(tree.root);
Ext.tree.getRootNode().reload();
Ext.tree.TreePanel.root.reload();
Ext.data.TreeStore.reload();
And nothing helped, I hope someone could clarify this to me, here is the code:
Edit: I have added complete code, as you can see everything is inside extOnReady method, I have removed var before var tree and still I got the same result
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore',{
proxy: {
type: 'ajax',
url: 'url1'
},
root: {
text: 'TOPP',
id: '1',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
tree = Ext.create('Ext.tree.Panel',{
id:'company_tree',
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: 'tree-div',
height: 300,
width: 766,
title: gettext('Companies'),
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [ {
text: gettext('Collapse All'),
handler: function(){
tree.collapseAll();
}
}]
}]
});
var loadingMask = new Ext.LoadMask(Ext.get('tree-div'),{
msg: gettext("Loading...")
});
tree.on('itemmove', function(tree, oldParent, newParent, index, options){
if(confirm(gettext('Are you sure you want to move this company?'))){
loadingMask.show();
Ext.Ajax.request({
scope: this,
url: 'url2/',
success:function(){
loadingMask.hide();
},
params: {
'ajaxAction[moveNode]': '',
index: index,
nodeid: tree.data.id,
parentNodeID: newParent.data.id,
oldParentNodeID: oldParent.data.id
}
});
}else{
Ext.getCmp('company_tree').getStore.load();
}
});
Also I have tried to reload through console[Ext.getCmp('company_tree').getStore.load();] and it worked. When I try it through code it returns an error regarding fly function
n is null
[Break On This Error]
Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor);
Are you really trying to call these methods directly on Ext.tree namespace or Ext.tree.TreePanel class? If so you really need to educate yourself on the difference between objects and classes.
And don't just attempt to guess what a method might be named. Had you looked it up from the manual you would have found out that there is no such method as reload on Tree, TreeStore or TreeView.
What you need to call to reload the tree is the load method of TreeStore:
tree.getStore().load();

Categories