I am developing a large enterprise application and I need to lazy load modules (another ExtJs applications) into a main application. I am trying to load app.js of other applications with Ext.Loader:
onTabChange: function (tabPanel, newCard, oldCard) {
Ext.Loader.loadScript({
url: 'SecondaryApp/app.js',
onLoad: function (obj) {
console.log('ok');
},
onError: function (obj) {
console.log('ko');
},
scope: this
});
newCard.add({ xtype: 'secondarylist' });
}
The callback it's ok but when I add the secondarylist component an exception of "Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.secondarylist" is being thrown. The component is:
Ext.define('SecondaryApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'secondarylist',
title: 'Personnel',
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
]
});
I tried to compile and load the List.js only but I have the same problem anyway.
Any suggestions?
EDIT:
I solved the issue (bad url '-_-) but now have another issue. If I load the js file it works properly but if I try to load the compiled js file (with Sencha Cmd) it fails because Ext.cmd is undefined. I need to load the compiled js and not the original js file. Any ideas?
Related
I am trying to use the RowExpander plugin, and I am getting the error
app.js?_dc=1622045752220:5338 [E] Ext.grid.plugin.RowExpander.setCmp(): The 'rowBodyTpl' config is required and is not defined.
I have tried the following two scenarios to define the rowBodyTpl and the error still occurs. Anyone have any ideas?
Implementation one I added the itemConfig as the example rowExpander in sencha docs
{
xtype: 'gridcolumn',
store: 'Accounts',
plugins: {
rowexpander: true,
},
itemConfig: {
body: {
tpl: '<img height="100" src="http://www.sencha.com/assets/images/sencha-//avatar-64x64.png"/>'
}
}
}
My second attempt I added the rowbody tpl to the gridcolumn itself and still get the error above..
{
xtype: 'gridcolumn',
store: 'Accounts',
plugins: {
rowexpander: true,
},
rowBodyTpl: null
enter code here
}
For Classic Toolkit.
plugins: {
rowexpander: {
rowBodyTpl: new Ext.XTemplate( '<p>text</p>' )
}
},
I've created a localstorage store, and stored demo values in it following this tutorial:
http://sureshdotariya.blogspot.com/2013/03/understanding-local-storage-proxy-in.html
And it all works fine, I've viewed the store data in the resources in chrome and it is there, and when I load the page it loads fine, no errors, but it shows no data, here's my view code:
Ext.define('MyTest.view.SearchPanel', {
extend: 'Ext.Panel',
xtype: 'searchpanel',
config: {
layout: 'fit',
items: [
{
xtype: 'nestedlist',
title: 'Search Results',
displayField: 'Name',
store: {
storeId: 'UserStore',
fields: ['Name']
},
}]
}
});
What am I missing here? Can I use local storage store as the store for the nested list? And if yes then why it shows "No items found", I've added the store in app.js, I tried requiring it in this view but that did not work.
Your help is appreciated, thanks.
Ext.dataview.NestedList requires Ext.data.TreeStore instead of Ext.data.Store ( in the sample URL you gave ).
There are root, defaultRootProperty config required in Ext.data.TreeStore, and leaf property in items.
Of course you can set Ext.data.proxy.LocalStorage as proxy in Ext.data.TreeStore , try with these codes :
Ext.define('ListApp.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
Ext.define('App.store.User', {
config: {
model: 'ListApp.model.User',
defaultRootProperty: 'items',
root: data
proxy: {
type: 'localstorage',
id: 'UserInfo'
}
}
});
I want to have a Navigation view. I am trying to populate the list in Sencha Touch using a JsonP proxy.
Here's the sample code snippet of what I have tried till now :
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype:'navigateview',
config : {
fullscreen:true,
styleHtmlContent:true,
scrollable:true,
items : [
{
title:'Navigation',
items : [
{
xtype:'list',
store: {
fields : ['title','author'],
proxy : {
type:'jsonp',
url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true,
},
itemTpl:'<div class="contact">{title} <strong>{author}</strong></div>',
listeners : {
itemtap : function(){
Ext.Msg.alert('Called');
}
}
}
],
}
]
}
});
But the problem is, my list is not getting populated. No items are being shown up in the list.
Also, I am constantly getting this error on console.
XMLHttpRequest cannot load
http://api.tinyhippos.com/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=list.php%3F_dc%3D1334462633038%26page%3D1%26start%3D0%26limit%3D25.
Origin http://localhost is not allowed by Access-Control-Allow-Origin.
Anyone please guide ? Anything that I am missing here ?
i was facing the same error when using AJAX request in cross domain.
have a look here
you have to make sure that the server part is configured properly using jsonp
as a first step identify if your application will run correctly when you disable web security in your browser
locate your chrome installation directory
then type in your cmd: chrome --disable-web-security
Your Ext.navigation.View object is containing one Ext.Component object (xtype not defined so defaulted to 'component') that is containing your list. If you put your list directly as an item of your view, it'll be rendered:
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype: 'navigateview',
config : {
fullscreen: true,
styleHtmlContent: true,
scrollable: true,
items : [{
title: 'Navigation',
xtype: 'list',
store: {
fields: ['title','author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true
},
itemTpl: '<div class="contact">{title} <strong>{author}</strong></div>'
}]
}
});
Note1: Not sure why your code is not working.
Note2: The error your mentioned is not related to your code snippet
I contact you because I'm in a deadlock.
I try to get data from a extern web service with "ScriptTag" but it does not work because the web service returns simple json format (No JSONP).
Do you know if there is a another way to retrieve json using sencha ?
var helloWorld = new Ext.Application({
Parking: Ext.regModel('Parking', {
fields:[
{name:'parkingName'},
{name:'latitude'},
{name:'longitude'},
{name:'mapUrl'}
],
}),
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'JSON Recovery'}],
tabBar: {
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{cls:'Page1', title:'Page1', html:'Page1'},
{
cls: 'list',
title: 'Page2',
xtype: 'list',
loadingText: 'Chargement',
itemTpl:'<div>{parkingName}</div>',
store: new Ext.data.Store({
autoLoad:true,
model: 'Parking',
proxy: {
type: 'scripttag',
url : 'http://walker.hotcity.lu/hotcity-central-server/webresources/parking/json?format-version=1_0&client-type=iPhone',
reader: {
type: 'json',
root: 'remoteObject'
},
}
}),
},
],
});
}
});
warning : Resource interpreted as Script but transferred with MIME type application/json.
error : Uncaught SyntaxError: Unexpected token :
Thank You.
Kevin.
What you are looking for is the Ajax Proxy. There are some examples in the docs about how to use it, and how to configure it. The default reader is JSON so as long as your model matches up with the information retrieved via JSON then you will be alright.
The other thing you should be aware of is that, JSONP can get around cross site scripting, but if you are not deploying to the walker.hotcity.lu domain, then the browser will not allow the request due to the same origin policy. The server will have to respond with the proper CORS headers to allow your app to access the data.
I am used to ExtJS 3.X, but am struggling with ExtJS 4.
I want to create an extension of a grid and be able to use an instance of the grid with the xtype. As far as im aware, I have to set the alias as widget.xtypename but its not working for me.
var MyGrid = Ext.define('mygrid', {
extend:'Ext.grid.Panel',
alias: 'widget.mygrid',
// rest of grid...
});
Ext.create('Ext.window.Window', {
title:'My Window',
items:[{
xtype:'mygrid'
}]
})
The Error I am getting in Chrome console is Cannot create an instance of unrecognized alias: widget.mygrid
Some help would be much appretiated
Ext.define('MyApp.Grid',{
extend: 'Ext.grid.GridPanel',
alias: 'widget.mygrid',
.......
.......
}
Now you can use as xtype:'mygrid'
The problem may be that you are attempting to instantiate an object that uses your new class, immediately following the call to Ext.define. Remember that Ext.define is an asynchronous process. Anything that needs to instantiate components should be in an onReady handler, or in Ext.application (launch), or in initComponent in a component class, or in init in a controller class, for these locations are guaranteed to be called only after all the defines have completed.
Specifying an alias beginning with "widget." will allow you to use it wherever xtype is expected. In your simple example, you might try doing the following:
var MyGrid = Ext.define('mygrid', {
extend:'Ext.grid.Panel',
alias: 'widget.mygrid',
// rest of grid...
}, function() {
Ext.create('Ext.window.Window', {
title:'My Window',
items:[{
xtype:'mygrid'
}]
});
});
This will instantiate your window within the callback after the define completes.
If you are using working on a MVC application, you can fix this by adding the view information to your controller. In your controller you need to specify the view in an array named views.. Here is an example:
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
views: ['users.List'],
...
In your case you may need to define views:['mygrid'].
If you are not using MVC architecture, you will need to use the Ext.require and specify your grid class exists.
I believe you need to add a xtype to your config:
var MyGrid = Ext.define('mygrid', {
extend:'Ext.grid.Panel',
alias: 'widget.mygrid',
xtype: 'mygrid',
// rest of grid...
});
After researching more, I would expect the alias to be all you need. Are you defining an initComponent function? Below is an example from Sencha:
Ext.define('App.BookGrid', {
extend: 'Ext.grid.Panel',
// This will associate an string representation of a class
// (called an xtype) with the Component Manager
// It allows you to support lazy instantiation of your components
alias: 'widget.bookgrid',
// override
initComponent : function() {
// Pass in a column model definition
// Note that the DetailPageURL was defined in the record definition but is not used
// here. That is okay.
this.columns = [
{text: "Author", width: 120, dataIndex: 'Author', sortable: true},
{text: "Title", flex: 1, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
];
// Note the use of a storeId, this will register thisStore
// with the StoreManager and allow us to retrieve it very easily.
this.store = new App.BookStore({
storeId: 'gridBookStore',
url: 'sheldon.xml'
});
// finally call the superclasses implementation
App.BookGrid.superclass.initComponent.call(this);
}
});
This one also works:
Ext.define('Path.to.ClassUsingSubcomponent', {
...
requires: ['Path.to.YourSubcomponent'],
...
}