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?
Related
I have a simple app presentation with a set of windows with sencha components. When a event of move previous window or move next window the main controller take the view, clean it and add a new component to view...
Ext.define('jsclient.view.main.MainVC', {
extend: 'Ext.app.ViewController',
alias: 'controller.main-view',
config: {
listen: {
global: {
eventNewWindow: 'eventNewWindow'
}
}
},
eventNewWindow: function (callback) {
this.view.removeAll();
this.view.add(callback());
}
});
The problem occurs when i put a panel component that contains a tabpanel, the components paint all window, paints the tabs, but no paint the components that contain each tab. If i exam the components that window create, its was created but not render or showing.
Ext.define('jsclient.view.articleCheck.ArticleCheckV', {
extend: 'Fwk.Panel',
alias: 'widget.article-check',
controller: 'article-check',
viewModel: 'article-check',
requires: [
'Fwk.Panel',
'Ext.TabPanel',
'jsclient.view.articleCheck.ArticleCheckVM',
'jsclient.view.articleCheck.ArticleCheckVC',
'jsclient.view.articleCheck.articlePending.ArticlePendingV',
'jsclient.view.articleCheck.articleChecked.ArticleCheckedV'
],
cls: 'article-check',
title: 'Mi ventana**',
titleAlign: 'center',
layout: {
type: 'vbox',
align: 'fit'
},
items: [{
xtype: 'tabpanel',
flex: 1,
deferredRender: true,
items: [{
title: 'Pendientes',
reference: 'pending',
xtype: 'article-pending',
width: "50%"
}, {
title: 'Chequeados',
reference: 'checked',
xtype: 'article-checked',
width: "50%",
}]
}],
tools: [{
type: 'left',
docked: 'left',
listeners: {
click: {
element: 'element',
fn: 'goPrevious'
}
}
}, {
type: 'plus',
docked: 'right',
margin: '0 20 0 0',
listeners: {
click: {
element: 'element',
fn: 'goNewArticle'
}
}
}],
listeners: {
click: {
element: 'element',
fn: 'prueba'
}
},
constructor: function (config) {
this.callParent([config]);
}
});
Any code have two file more that helps viewmodel component, i will saw you a example above.
The View:
Ext.define('jsclient.view.main.MainV', {
extend: 'Fwk.Panel',
alias: 'widget.main-view',
id: 'main-view',
requires: [
'Fwk.Panel',
'jsclient.view.main.MainVM',
'jsclient.view.main.MainVC',
'jsclient.view.blockCheck.BlockCheckV',
'jsclient.view.centerList.CenterListV',
'jsclient.view.articleCheck.ArticleCheckV',
'jsclient.view.articleCheck.articlePending.ArticlePendingV',
'jsclient.view.articleCheck.articleChecked.ArticleCheckedV'
],
viewModel: 'main-view',
controller: 'main-view',
layout: {
type: 'vbox',
align: 'fit'
},
margin: 'auto',
items: [{
xtype: 'center-list',
flex: 1
}],
constructor: function (config) {
this.callParent([config]);
//Read url params and restore context if needed
var urlParams = location.search;
if (urlParams !== '') {
Fwk.Context.restore(urlParams);
}
}
});
The Controller:
Ext.define('jsclient.view.main.MainVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main-view',
data: {},
stores: {}
});
Well, to my problem i doesn't find a solution in the way i'm trying solved... But using a different point of view i can solved.
My oldest way, create items on a component:
This solution might be correct but... for tabpanel doesn't work. I create a component in viewport (main component) and in this component when a event happend i create a new component.
-> Viewport
|
-> MainComponent
|
-> AnyComponent (event)
Using this piece of code i try modified the view main with a callback that return the
constructor of new component in main view:
/*
* Callback in other view
*/
callback: function(options){
return new jsclient.view.mycomponent.MyComponentV(options);
}
/*-----------------------------*/
eventNewWindow: function (callback) {
this.view.removeAll();
this.view.add(callback());
}
My new way create items on viewport:
The new solution is similar but use Viewport instead main component, We need have some
things clear. Viewport is a set (Array) of views that compete for main view, if not are
on main view, the components is on second plane and they not are visible but are init.
So solution left like that, instead use main component we use viewport:
We create N controller for N view, and when a other view send a global event, the controller catch the event and itself create here on viewport.
Ext.define('jsclient.controller.main.MainController', {
extend: 'Ext.app.Controller',
requires: [
'jsclient.view.main.i18n.Main_en_EN',
'jsclient.view.main.i18n.Main_es_ES',
'jsclient.view.main.MainV',
],
config: {
listen: {
global: {
eventNewMain: 'eventNewMain'
}
}
},
eventNewMain : function(options) {
Ext.Viewport.setActiveItem('main-view');
}
});
In the case we need pass argument to component we can do this piece of code:
Ext.define('jsclient.controller.articleCheck.ArticleCheckController', {
extend: 'Ext.app.Controller',
requires: [
'jsclient.view.main.i18n.Main_en_EN',
'jsclient.view.main.i18n.Main_es_ES',
'jsclient.view.articleCheck.ArticleCheckV',
],
config: {
listen: {
global: {
eventNewArticleCheck: 'eventNewArticleCheck'
}
}
},
eventNewArticleCheck: function (options) {
if(options != undefined){
Ext.Viewport.removeAll();
}
Ext.Viewport.add({
xtype: 'article-check',
options: { block: options }
});
Ext.Viewport.setActiveItem('article-check');
}
});
what's the best place to create / bind KeyMaps to a Viewport ?
Given a very simple Viewport like this :
Ext.define('EmptyTemplate.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'EmptyTemplate.view.Main'
],
layout: {
type: 'fit'
},
items: [{
xtype: 'app-main'
}],
listeners: {
afterrender: {
fn: function(){
// map one key by key code
this.keyMap = Ext.create('Ext.util.KeyMap', this.el, {
scope: this,
key: Ext.EventObject.ENTER,
fn: function () {
console.log("enter pressed");
}
});
}
}
}
});
Whats the proper way to create KeyMaps?
First some best practice advises:
If you need to setup your component use
the [initComponent][1] (you should read this for detailed information),
the other provided template methods and
in some rare cases the constructor.
In you case I would use the template method afterRender
Ext.define('EmptyTemplate.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'EmptyTemplate.view.Main'
],
layout: {
type: 'fit'
},
items: [{
xtype: 'app-main'
}],
afterRender: {
this.callParent(arguments); // always!!
this.bindKeyMap();
},
bindKeyMap: function() {
var me = this; // use 'me' if 'this' occurs more then 3 times
if(me.keyMap) {
me.keyMap.enable();
return;
}
// map one key by key code
me.keyMap = Ext.create('Ext.util.KeyMap', me.el, {
scope: me,
key: Ext.EventObject.ENTER,
fn: me.onEnter
});
},
unbindKeyMap: function() {
this.keyMap.disable();
},
onDisable: function() {
this.unbindKeyMap();
this.callParent(arguments); // always!!
},
onEnable: function() {
this.callParent(arguments); // always!!
this.bindKeyMap();
},
onEnter: function(){
// i am executed in the scope of the class instance
}
});
Note that the example above handles the whole keymap but you can also add / remove single keys from the map.
Note that this is untested prototype code, but it should work this way.
How to find template methods:
Go to the docs
Show protected member
Look for the mark
This post about overriding might also be a good reading
How can I call a new view on image tap which is defined in tpl.
Code:
tpl: Ext.create('Ext.XTemplate','<tpl for="sample">',
'<div> {tittle}</div>
<div><img src="{photo}"/></div>',
'</tpl>',
/////////////////////////////////////////
After your directions, I'm sure I have something wrong. I just want to know how to link an image to puncture it take you to another view. Let me explain better?
Thank you very much for your time and dedication.
//MyController
Ext.define('DemoApp.controller.ControllerR', {
extend: 'Ext.app.Controller',
config: {
refs: {
res: 'res',
},
control: {
'rest list': {
itemtap: 'showR' },
}
},
onCreateNewView: function() {
if(document.getElementById('something')) {
Ext.Viewport.setActiveItem(Ext.create('DemoApp.view.DetalTwo'));
}
},
});
//My Template
Ext.define('DemoApp.view.ViewR', {
extend: 'Ext.Panel',
xtype: 'res',
config: {
title: 'Res',
iconCls: 'info',
scrollable: true,
data: {
res: [ model: 'DemoApp.model.ModelR',
autoLoad: true,
storeId: 'resStore',
proxy: {
type: 'ajax',
url: 'data/res.json',
reader: {
type: 'json',
rootProperty:'wha.res'
}
}]
},
tpl: Ext.create('Ext.XTemplate','<tpl for="sample">',
'<div> {tittle}</div>
<div><img id="something "src="{photo}"/></div>',
'</tpl>',
{
join: function(value) {
return value.join(', ');
}
})
}
});
You can give an id to image tag i.e. <img id = "something"/> and if tpl is defined for list then go to that list's handling function in controller or in view(where you defined a list and listeners) and write this code:
if(document.getElementById('Your img tag id')) {
// create a view and active it
}
For Example:
onCreateNewView: function() {
if(document.getElementById('something')) {
Ext.Viewport.setActiveItem(Ext.create('DemoApp.view.NewView'));
}
}
First thing first... you should do some google before putting such question in Stack.Your Code is totally wrong as well as it contains major syntax errors. And we are not here to solve some stupid syntax errors.Anyways Let me explain something..
1.) In your controller you are trying to bind 'itemtap' event.You can only bind 'itemtap' event if there is a list in your view. Here, in your case there is no list.
2.) And in controller it's look like something this:
refs: {
imageList: '#imageList',
},
control: {
'imageList': {
itemtap: 'onCreateNewView'
},
}
3.) Create a list in your view:
config: {
items: [
{
xtype: 'list',
id: 'imageList',
itemId: 'imageList',
tpl:'Your tpl code'
}
]
}
I have some code that is pulling a Release model back and displaying in a grid, this is working fine, but I cannot work out how to inspect what is in the returned model.
What I would like is to get the contents of the model in some kind of object that I can reorganise or drill into as I see fit (in this case the release model).
If I add a component and just dump the model into the html it is not returning the contents as I would expect.
Rally.data.ModelFactory.getModel({
type: 'Release',
success: function(model) {
this.add({
xtype: 'component',
html: model
});
this.grid = this.add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'RevisionHistory' ],
storeConfig: {
filters: queryFilters
}
});
},
scope: this
});
If I dig into the ExtJS docs it seems I should be able to do something like getData() on the model to return the contents but this is not working.
Inspection in the debugger tells me I have a "Rally.domain.v2.0.project.10098485624.Release" object but I can't see how to simply access the list of items in the object. Obviously there is a way because passing this model to a grid component will display it quite happily.
The debugger for this object shows me a number of further functions to call but I have no idea which one or how to use it
...
getArtifactMappings: function () {
getCollectionFields: function () {
getCustomFields: function () {
getField: function (fieldName) {
getFields: function () {
getFieldsByName: function (fieldNames) {
getName: function () {
getNonCollectionFields: function () {
getPermissionLevels: function (permission) {
getProxy: function () {
etc...
The Rally docs indicate I should be able to call getData() on a model https://help.rallydev.com/apps/2.0rc2/doc/#!/api/Rally.data.Model but it looks like the ModelFactory.getModel() is not returning a type that has a getData() method
A model is a class, and a record is an instance of that class.
getData() will work on a record.
There are static methods that would work on the actual model, but getData() is not one of them.
Here is a fragment from the code below:
_onDataLoaded: function(store, data){
_.each(data, function(record){
var r = record.getData();
console.log('release', r);
This code builds a grid of Releases filtered by project and ReleaseStartDate. I noticed that in your code you want to display model information, maybe for debug purposes, by actually modifying the dom. I would prefer to use console.log, but in the example below I did both. I used a border layout with a footer, and set html proprety of the container in the footer to JSON.stringify(r)
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px',
},
items: [{
title: 'data',
region:'south',
itemId: 'd',
margins: '5 0 0 0',
cmargins: '5 5 0 0'
},{
title: 'Releases',
itemId: 'r',
collapsible: false,
region:'center',
margins: '5 0 0 0'
}] ,
launch: function() {
var context = this.getContext();
var projectId = context.getProject().ObjectID;
var millisecondsInDay = 86400000;
var currentDate = new Date();
var startDate = new Date(currentDate - millisecondsInDay*90); //in the last 90 days
var startDateUTC = startDate.toISOString();
Ext.create('Rally.data.WsapiDataStore', {
model: 'Release',
fetch: ['Name','ReleaseStartDate','ReleaseDate', 'State'],
filters: [
{
property: 'ReleaseStartDate',
operator: '>',
value: startDateUTC
},
{
property: 'Project',
operator: '=',
value: '/project/'+ projectId
}
],
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data){
var text = '';
_.each(data, function(record){
var r = record.getData();
console.log('release', r);
text = text + JSON.stringify(r);
});
console.log('text', text);
this.down('#d').add({
xtype:'container',
html: text
});
if (!this.down('#g')) {
this.down('#r').add({
xtype: 'rallygrid',
store: store,
itemId: 'g',
columnCfgs: [
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'State', dataIndex: 'State'
},
{
text: 'Start Date', dataIndex: 'ReleaseStartDate', flex:1
},
{
text: 'Release Date', dataIndex: 'ReleaseDate',flex:1
}
]
});
}
else{
(this.down('#g')).reconfigure(store);
}
}
});
We are trying to build a simple prototype to consume our data service using ExtJs (also to learn ExtJs at the same time).
While developing the prototype (with basic knowledge on ExtJS), I encountered several hickups. Before I post questions, I would like to have you to take a quick look at the following.
The following is the main class which interacts with the service. We wanted to make sure that certain UI components are masked/unmasked during ajax communications.
Ext.define('Sample.provider.SvcClient', {
TestConnectivity: function(prms){
debugger;
Ext.Ajax.on('beforerequest', function(conn,o,result) {
prms.BeforeRequest(conn,o,result);
});
Ext.Ajax.on('requestcomplete',function(conn,o,result) {
prms.RequestComplete(conn,o,result);
});
Ext.Ajax.on('requestexception',function(conn,o,result) {
prms.RequestException(conn,o,result);
});
Ext.Ajax.request({
url: prms.Url,
method: prms.HttpMethod,
headers: {
'Authorization' : 'Basic ' + prms.Credentials
},
success: prms.Success,
failure: prms.Failure,
callback: prms.Callback
});
}
});
We developed an extension to SvcClient especially to help masking of controls during ajax communications:
Ext.define('Sample.util.ClientProxy', {
CtlToMask : null,
DoTestConnection: function(ctlToMask, callback, url, userName, pwd) {
debugger;
var proxy = this;
proxy.CtlToMask = ctlToMask;
var client = new Sample.provider.SvcClient();
var params = {
Url: url,
HttpMethod: "GET",
Credentials: Sample.util.Conversions.Base64.encode(userName + ":" + pwd),
CtlToMask: proxy.CtlToMask,
Scope:proxy,
BeforeRequest: function(conn,o,result,Scope) {
debugger;
if(Scope.CtlToMask !=null) {
if(Scope.CtlToMask.getEl() != undefined)
Scope.CtlToMask.getEl().mask('Testing Connectivity...', 'x-mask-loading');
else
Scope.CtlToMask.mask('Testing Connectivity...', 'x-mask-loading');
}
},
RequestComplete: function(conn,o,result) {
if(this.CtlToMask !=null) {
if(this.CtlToMask.getEl() != undefined)
this.CtlToMask.getEl().unmask(true);
else
this.CtlToMask.unmask(true);
}
},
RequestException: function(conn,o,result) {
if(this.CtlToMask !=null) {
if(this.CtlToMask.getEl() != undefined)
this.CtlToMask.getEl().unmask(true);
else
this.CtlToMask.unmask(true);
}
}
};
client.TestConnectivity(params);
}
});
I have the controller as shown below:
Ext.define('Sample.controller.Locations', {
extend: 'Ext.app.Controller',
models: ['Location', 'Country'],
views: [
'portal.location.Menu',
'portal.location.Edit'
],
init: function() {
this.control({
'locationsMenu':{
OpenAddNewSvcPopup: this.OnOpenAddNewSvcPopup
},
'locationsEdit':{
TestSvcConnectivity: this.OnTestSvcConnectivity,
render: function () { },
afterrender: function () { },
boxready: function () { }
}
});
},
OnOpenAddNewSvcPopup: function(){
var newLoc = Ext.create('Sample.model.Location', {
UserName: 'admin',
Uri: 'http://localhost/DataServicesBase/Data.svc'
});
var v = Ext.create('widget.locationsEdit',{ mode:'add'});
v.down('form').loadRecord(newLoc);
},
OnTestSvcConnectivity: function(ctl){
var proxy = new Sample.util.ClientProxy();
proxy.DoTestConnection(
ctl,
this.OnTestSvcConnectivityCallback,
ctl.down("#Uri").value + '/Countries',
ctl.down("#UserName").value,
ctl.down("#Password").value
);
},
OnTestSvcConnectivityCallback: function(options,success,result){
if(success) {
//show the result
}
else {
//Show error in window
}
}
});
The view would look like the following:
Ext.define('Sample.view.portal.location.Edit', {
extend: 'Ext.window.Window',
alias: 'widget.locationsEdit',
//title: 'Edit Service Location',
layout: 'fit',
autoShow: true,
title: 'Edit Service Location',
bodyStyle: 'border:0px',
closeAction:'destroy',
config:{
mode: 'edit'
},
constructor: function(configs){
this.callParent(arguments);
this.initConfig(configs);
if(this.mode == "add") this.setTitle('Add New Service Location');
},
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name: 'Id',
itemId: 'Id',
fieldLabel: 'Unique Name',
labelStyle: 'font-weight:bold',
allowBlank: false,
maxLength: 64,
width: 300
},
{
xtype: 'textfield',
name : 'Uri',
itemId: 'Uri',
fieldLabel: 'URI',
maxLength: 300,
width: 500,
allowBlank: false
},
{
xtype: 'textfield',
name : 'UserName',
itemId: 'UserName',
fieldLabel: 'User Name',
allowBlank: false,
maxLength: 64,
width: 200
},
{
xtype: 'textfield',
name : 'Password',
itemId: 'Password',
fieldLabel: 'Password',
allowBlank: false,
maxLength: 64,
width: 200
}
],
bodyStyle: 'padding:5px;'
}
];
this.buttons = [
{
text: 'Test Connectivity',
action: 'test',
scope: this,
handler: this.OnTestSvcConnectivity
},
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent();
this.addEvents('TestSvcConnectivity') //custom event
},
OnTestSvcConnectivity: function(){
this.fireEvent('TestSvcConnectivity', this); //will be raised to controller
}
});
Q1
The approach works fine during first time when I click on "Test Connection" button (from the popup). If I click the same button for the second time, the (BeforeRequest) handler fires twice. Clicking for the third time, the handler gets fired thrice. What is the mistake in my code.
Q2
If I cancel the popup and again click on "Test Connection" it would never work. The handler still maintains "some" kind of reference (or state) of previous popup instance. As it could not be found, it throws "undefine" on object members. I confirmed this as through the debugger, I could see the id of previous popup instance instead of the current one. The handler always tries to honor the first popup instantiated no matter what.
Q3
Is the pattern we are trying to follow for this sample prototype is having any pitfalls/problems. We are trying to develop using MVC features of ExtJS and ensure that we are using stand and good patterns/practices so that we will not be facing above kind of very basic issues.