Display values when the Window is displayed - extjs

I want to display a popout window with some values displayed on it fetched from a PHP server file. I have no clue how to display the items on the window.
I don't know why but the console.log message 'method call' in the controller doesn't get displayed when the view is rendered. I think this is because i have added click: this.methodcall (which gets called only when a button click is made, but i want the log statement to print when the view is rendered)
Nothing gets displayed on the View, i think this is because i have not added any code to display it in the View.
Can someone help me solve this problem ?
My Pop out window VIEW code;
Ext.define('Project.view.user.Popupwin', {
extend: 'Ext.window.Window',
alias: 'widget.popupwin',
layout:'fit',
autoShow: true,
initComponent: function() {
this.store = 'Popupwin';
this.items = [
{
xtype: 'form',
items: [
]
}
];
this.callParent(arguments);
}
});
STORE
Ext.define('Project.store.Popupwin',{
extend:'Ext.data.Store',
model:'App.model.Popupwin',
proxy: {
actionMethods : {
read : 'POST'
},
type: 'ajax',
url : 'loaddata.php',
autoLoad: true
}
});
CONTROLLER
Ext.define('Project.controller.Popupwin',{
extend: 'Ext.app.Controller',
stores:['Popupwin'],
models:['Popupwin'],
views:['DoctorView'],
init: function(){
console.log('executed');
this.control({
'popupwin': {
click: this.methodcall
}
});
},
methodcall: function() {
console.log('method call');
this.getShowPopupwinStore().load();
}
});
Model
Ext.define ('Project.model.Popupwin',{
extend: 'Ext.data.Model',
fields:['fname','lanme']
});

Window has no click event, so you can't listen for it.
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
afterRender: function(){
this.callParent(arguments);
this.el.on('click', this.fireClick, this);
},
fireClick: function(e, t){
this.fireEvent('click', this, e);
}
});

Related

ExtJs How to Loading data into form panel from store/model

i'm really new to extjs 4. im try to load default value form load as bellow
launch: function() {
Ext.create('panelid', {renderTo: 'form'});
var form = this.up('panelid').getForm();
var model = Ext.getCmp('modelid');
form.loadRecord(model);
}
that not work form me that gave to me undefined form
this my view class
Ext.define('panelid', {
extend: 'Ext.form.Panel',
alternateClassName: [
'confpanel'
],
requires: [
'Ext.container.Container',
'Ext.form.field.File',
'Ext.button.Button'
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
itemId: 'NAME_2',
fieldLabel: 'SDFA',
name: 'NAME_2'
},
{
xtype: 'button',
handler: function(button, e) {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'AA?submit=true'
});
}
},
itemId: 'btnSave',
text: 'Save'
}
]
});
me.callParent(arguments);
}
});
my store userClassName name is 'storeid' and my model userClassName is modelid this very simple question but it really hard to understand data communication in between server-client. please help to me this simple question
I see a couple of errors on your code:
renderTo should only be used with Elements and not components.
E.g. Ext.getBody() or a div id on your html page
For containers you should use applyTo.
And a model is not a Component. You cannot use getCmp to get the model reference.
You will have to define it the same way you defined the panel and then use the name you specified there as a reference.
Check the sencha documents on how to do all this. Its very well explained there.

Sencha Architect Unable to Navigate to List View from DataView OnItemTap

Can anyone please let me know what I am doing wrong in the following code ?. When ever I click on the dataview item I get the error :
Uncaught TypeError: Object [object Object] has no method 'getMainView' app.js:69888
My code is given below :
Ext.define('DTZMobility.view.DashboardView', {
extend: 'Ext.dataview.DataView',
alias: 'widget.dashboardView',
requires: [
'Ext.XTemplate'
],
config: {
baseCls: 'rd-tiled-view',
fullscreen: true,
scrollable: 'vertical',
itemCls: 'rd-tiled-view-item',
store: 'moduleStore',
itemTpl: [
'<div>{name}</div>'
],
listeners: [
{
fn: 'onDataviewItemTap',
event: 'itemtap'
}
]
},
onDataviewItemTap: function(dataview, index, target, record, e, eOpts) {
var workorderlist = Ext.create('widget.workorderlist'), // Create work order list View
mainView = this.getMainView(); // Main view
console.log("Created mainview");
// Navigate to Sign In Panel
mainView.push({
xtype: "workorderlist",
title: "Work Orders"
});
}
});
I finally figured it out. The event handling of the itemtap event should be as follows :
onDataviewItemTap: function(dataview, index, target, record, e, eOpts) {
var workorderlist = Ext.create('widget.workorderlist');
var c = Ext.getCmp('mainView');
if(c === undefined) {
c = Ext.create('DTZMobility.view.MainView');
}
Ext.Viewport.animateActiveItem(c, {type:'slide'});
// Push the workorder list to the mainview
c.push({
xtype: "workorderlist",
title: "Work Orders"
});
}

extjs - Store with autoload true should not load on application launch

I have a grid linked to a store with autoLoad: true. The problem is that the store gets loaded on application launch, even if the view is created only later when accessed through a menu.
I have referenced the store in Application.js and in the view, but I'm not instatiating explicitly neither the store nor the view.
I don't know how to achieve that the store is loaded only when needed by the view.
If I set autoLoad: true, the store gets loaded on application launch.
If I set autoLoad: false, the store doesn't get loaded at all.
I know this is pretty basic, but I'm stuck so far.
Here is all the relevant code for reference:
app/store/Owners.js
Ext.define('Mb.store.Owners', {
extend: 'Ext.data.Store',
model: 'Mb.model.Owner',
autoLoad: true,
proxy: {
...
});
Application.js
Ext.define('Mb.Application', {
name: 'Mb',
extend: 'Ext.app.Application',
models: [
'Owner'
],
stores: [
'Owners'
],
...
app/view/Owners.js
Ext.define('Mb.view.winbiz.Owners', {
extend: 'Ext.grid.Panel',
alias: 'widget.test-gridPanel',
store: 'winbiz.Owners',
columns: [{
...
The view is instantiated in the controller:
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
init: function(){
this.control({
'menu #test': {click: this.onMenuTest},
})
},
onMenuTest: function(){
this.getController('Main').addToMainTab('test-gridPanel');
},
You can add render handler to view which will call store load method and disable autoLoad.
Example listener:
Ext.define('Mb.view.winbiz.Owners', {
extend: 'Ext.grid.Panel',
[...],
initComponent: function(){
this.callParent();
this.on('render', this.loadStore, this);
},
loadStore: function() {
this.getStore().load();
}
});
I would let the view's controller handle the store load.
Start by disabling autoload on the store.
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
ownerStore: null,
init: function(){
this.control({
'menu #test': {click: this.onMenuTest},
});
this.ownerStore = Ext.getStore('winbiz.Owners');
},
onMenuTest: function() {
if (this.ownerStore.loaded === false) {
this.ownerStore.load(
scope: this,
callback: this.onOwnerStoreLoaded
);
}
else {
this.addToTab();
}
},
onOwnerStoreLoaded: function (store, records, successful, eOpts) {
if (successful) {
store.loaded = true;
this.addToTab();
}
},
addToTab: function () {
this.getController('Main').addToMainTab('test-gridPanel');
}
Wheter you want to change the view before or after the store is loaded is another question.
This is my final controller code:
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
refs: [{ref: 'testGrid', selector: 'test-gridPanel'}],
init: function(){
this.listen({
store: {
'#Owners':{ load: this.onOwnersLoad}
}
})
this.control({
'menu #test': {click: this.onMenuTest},
'test-gridPanel': {render: this.onOwnersRender}
})
},
onMenuTest: function(){
this.getController('Main').addToMainTab('test-gridPanel');
},
onOwnersLoad: function(store){
store.loaded = true
},
onOwnersRender: function(){
var store = this.getTestGrid().getStore();
if(!store.loaded)store.load();
},
It puts all code into the controller as suggested by #pcguru and uses the render event to shorten the code as suggested by #Lolo. Thanks

Extjs 4 - How to up to parent component in initComponent function

I define a gridpanel like
Ext.define('Example', {
extend: 'Ext.grid.Panel',
alias: 'myGrid',
store:Ext.create('Ext.data.Store', {
fields: [
{name: 'name'}
]
}),
initComponent: function() {
alert(this.up('window').title); //but error like this.up(...) is undefined
this.callParent(arguments);
}
...
And I create a window have a item above
items: {
xtype: 'myGrid'
}
I want to get some thing in parent componet. How to up to parent component in initComponent function. Thanks
initComponent: function() {
var me = this;
this.callParent(arguments);
me.on('render', function() {
alert(me.up('window').title);
});
}
You can't. The component must first be instantiated before it is added to the container. You can override the onAdded template method, which will get called when the component is added to a container:
Ext.define('Foo',
extend: 'Ext.Component',
onAdded: function(ct) {
this.callParent(arguments);
console.log('Added to', ct);
}
});

Ext.getCmp is not working in ExtJS4

I am trying to create a component and access it inside controller. But while accessing the component by id, it is not returning the component. It always returns undefined. Please find below the code.
enter code here
//Component creation in view layer as below
Ext.define('MyApp.view.performance.grid.IFrameGridCmp', {
extend: 'Ext.panel.Panel',
alias: 'widget.crMainPanel',
id:'mainPanelId',
layout: {
align: 'stretch',
type: 'vbox'
},
border:0,
resizable: false,
forceFit: true,
autoWidth: true,
initComponent: function() {
Ext.apply(this, {
items: [
{
xtype:'panel',
flex:.02,
border:0
},
{
xtype:'crHeaderPanel',
flex:.05
},
{
xtype: 'crUpperPanel',
flex: 0.93
},
Ext.create('Ext.Component', {
autoEl: {
tag: 'iframe',
cls: 'x-hidden',
src: Ext.SSL_SECURE_URL
},
id:'FileDownloader',
height:0,
listeners: {
afterrender: function () {
this.getEl().on('load', function () {
console.log('loaded download frame');
});
}
},
load: function(config){
var e = this.getEl();
e.dom.src = config.url + (config.params ? '?' + Ext.urlEncode(config.params) : '');
e.dom.onload = function() {
Ext.getBody().unmask();
if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
Ext.Msg.show({
title: 'Attachment missing',
msg: 'The document you are after can not be found on the server.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
};
}
})
]
});
this.callParent(arguments);
}
});
========================================
enter code here
//Accessing the controller as below in controller
views: ['performance.grid.IFrameGridCmp'],
//The below line gives error
var downloader = Ext.getCmp('FileDownloader');
downloader.load({
url: '/APXUI/data/json/xls?exportData='+Ext.JSON.encode(records)
});
Well, the view is not created at the time you are calling Ext.getCmp()
Note that views: ['performance.grid.IFrameGridCmp'], is only a sort of binding that view to the controller, which means the controller will create a getter for you, nothing more. You still need to instantiate the view by calling .create(); or Ext.widget('crMainPanel')
In you controller use control for example to handle it:
me.control({
'crMainPanel #FileDownloader': {
afterrender: me.addDownloader
}
});
Don't use Ext.getCmp() it is really slow and you will have many issues with that.
Don't use id - better use itemId.
Why you need to call this from controller?

Resources