This is the generated App-uncompressed.html file from the example in Rally SDK website: When I copy and paste this code inside Rally as a custom HTMl app, it doesn't load anything. I just get a blank app.
<!DOCTYPE html>
<html>
<head>
<title>newTeam</title>
<script type="text/javascript" src="/apps/2.0rc/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Write app code here
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
}
});
Rally.launchApp('CustomApp', {
name:"newTeam",
parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
Also, I try to run the debug file in my browser and I get a Rally not defined error.
Rally is not defined because it should be rc1, not rc , as your code shows.
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
You may test these URLs in your browser:
https://rally1.rallydev.com/apps/2.0rc1/sdk-debug.js
https://rally1.rallydev.com/apps/2.0rc1/sdk.js
Related
I am new to extjs.I tried to write a simple application with MVC architecture as described here :
http://docs-origin.sencha.com/extjs/4.2.1
When I try to run the application in browser I give this error in firebug:
"NetworkError: 404 Not Found - http://127.0.0.1/Sample/app/view/userlist.js?_dc=1408194279243"
My project structured is :
List.js file :
/**
* Created by Sina-PC on 8/14/14.
*/
Ext.define('Sample.view.users.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
Users.js file:
Ext.define('Sample.controller.Users', {
extend: 'Ext.app.Controller',
views:['userlist'],
init: function() {
console.log('Initzed Users! This happens before the Application launch function is called');
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
}
,
onPanelRendered: function() {
console.log('The panel was rendered');
}
});/**
* Created by Sina-PC on 8/14/14.
*/
app.js file :
Ext.application({
name: 'Sample',
appFolder:'app',
controllers:[
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'userlist'
}
]
});
}
});
and index.html:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
ExtJs doesn't know what is a view 'userlist'. You must add to requires this file.
Ext.define('Sample.controller.Users', {
requires: [ 'Sample.view.users.List' ],
...
Users.js file has "views:['userlist']," and it should be "views:['Sample.view.users.List'],"
I did a little test regarding XSS attacks in ExtJS4. My HTML page looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-all-dev.js"></script>
<script type="text/javascript" src="testExtXSS.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
and testExtXSS.js looks like this:
Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(document.cookie)</script>Text field',
value: '<script>alert(document.cookie)</script>Text field'
}
]
});
formPanel.render('myDiv');
});
I expected the script tag in fieldLabel to be executed but it was not. When I looked at the HTML elements using Firebug and Chrome Developer Tools I could see the script element in the HTML tree.
Can anyone explain to me how ExtJS inserts this into the DOM and why it is not executed.
Thanks and best regards,
Ronald
This is because the ext template is injected using innerHTML, which is the fastest approach, but comes with a drawback that scripts don't get executed.
But you can just use update() method for Ext.dom.Element:
...
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(1)</script>Text field',
value: 'some val',
listeners: {
render: function(cmp) {
cmp.getEl().update(cmp.getEl().dom.innerHTML, true);
}
}
}
...
Screenshot: http://my.jetscreenshot.com/6795/20130813-pdeh-28kb
(Sorry for my english)
because ExtJS 4.2 seems to have a bug in using filters on an buffered grid (infinite grid), i rewrote my code and now i'm just using a simple search field to let the user search all over the grid's data.
as long as something is found it works perfect but if nothing's found ext crashes with the exception
"Page Map asked for range which it does not have"
my javascript "includes"
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/menu/ListMenu.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/menu/RangeMenu.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/FiltersFeature.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/TransformGrid.js"></script>
<script type="text/javascript" src="/ASDB4/js/ext-4.2.0.663/examples/ux/form/SearchField.js"></script>
my store:
this._store = Ext.create('Ext.data.Store', {
storeId: 'ActivityLogStore',
model: 'ActivityLogModel',
remoteGroup: true,
autoDestroy: true,
buffered: true,
remoteSort: true,
leadingBufferZone: 300,
pageSize: 100,
autoLoad: true,
proxy: {
type: 'ajax',
url: '~myurl~',
reader: {
root: 'data[0].sActivityLogsArr',
totalProperty: 'data[0].totalcount'
},
simpleSortMode: true,
simpleGroupMode: true,
groupParam: 'sort',
groupDirectionParam: 'dir',
filterParam: 'searchString',
encodeFilters: function (filters) {
return filters[0].value;
}
},
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function (store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
beforeload: function () {
// remove any selections - otherwise store loading crashes (another bug in extjs ...?)
Ext.getCmp('activityLogmanagergrid').getSelectionModel().clearSelections();
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function (store, operation) {
if (operation.groupers && operation.groupers.length) {
delete operation.sorters;
}
},
load: function () {
Ext.getCmp('activityLogmanagergrid').verticalScroller.scrollTo(0);
}
}
});
my searchfield, located at the toolbar:
this._moduleToolbar = {
xtype: 'toolbar',
itemId: 'activityLogmanagerToolbar',
items: [{
iconCls: 'icon-arrow_refresh',
text: '#menu_reload#',
itemId: 'btnReload',
scope: this,
handler: function () {
// reset list display to top to avoid corrupted display
Ext.getCmp('activityLogmanagergrid').store.load();
}
}, {
iconCls: 'icon-cross',
text: '#menu_deleteAllActivityLog#',
itemId: 'btnDeleteAll',
scope: this,
handler: this.DeleteAllActivityLog
}, '->', {
width: 300,
fieldLabel: 'Search',
labelWidth: 50,
xtype: 'searchfield',
store: scope._store
}
]
};
please help ...
I also had this problem. I posted to their forum (like others) and opened a support ticket. They did not come up with a solution for Ext JS 4.2, but the bug (and many others in buffered stores) got fixed in version 4.2.1. I think the nearly rebuilded most of the code there, so they did not have the option to make a cheap hotfix to 4.2.
Until I can migrate to 4.2.1 I wrapped all my find-record-calls with try-catch blocks. I also tried to override the getRange function in Store.js on line 3383, but it belongs to the internal PageMap class, so this is no option.
I wrote this Ext js application but I keep getting this error that says cannot call method 'create' in line 32. I took out some lines from the original code. Ext.onReady didnt work, the page would just be blank and the debuger didnt give any errors, but when i took out Ext.onReady() this error popped up
<html>
<head><title>Arrar Read</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:/Users/kevin/ext-3.4.0/ext-3.4.0 /resources/css/ext-all.css"/>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter /ext/ext-base-debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0ext-all.js"> </script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/ext-all- debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/pkgs/ext-core.js"></script>
<script type="text/javascript">
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
var nameRecord = Ext.data.Record.create([
{ name: 'name', mapping : 1},
{ name: 'state',mapping : 2}
]);
var arrayReader = new Ext.data.ArrayReader({},nameRecord); //creating a reader
var memoryProxy = new Ext.data.MemoryProxy(arrayD); //creating a memory proxy from the array
var store = new Ext.data.Store({ //create a store
reader : arrayReader,
proxy : memoryProxy
});
var colModel = new Ext.grid.ColumnModel([
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName'
},
{
header : 'State',
dataIndex : 'state'
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
});
var grid = new Ext.grid.GridPanel({ //create a gridpanel
title : 'First Grid',
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : colModel,
selModel : selModel
});
console.debug('everything executed');
</script>
</body>
</html>
I dont know if im missing some script files or not . can someone please help me
Here is an ExtJs 4 example: (working fiddle)
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'state', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Person',
data: arrayD
});
var grid = Ext.create('Ext.grid.GridPanel', { //create a gridpanel
title: 'First Grid',
renderTo: Ext.getBody(),
autoHeight: true,
width: 250,
store: store,
columns: [
{
header: 'Full Name',
sortable: true,
dataIndex: 'name'},
{
header: 'State',
dataIndex: 'state'
}
]
});
console.debug('everything executed');
You can download your own version and put it in a webserver or use one of these for js:
//for production
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
//for debug => isn't minified
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
//for development => isn't minified, logs errors and warnings to the console.
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-dev.js"></script>
for css use:
<link rel="stylesheet" type="text/css" href="htpp://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css"/>
My directory structure looks like follows. (i'm using ext mvc )
www.mysite.com/ext/designer.js
www.mysite.com/ext/app/view
www.mysite.com/ext/app/store
I have the js declared here
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js"></script>
<script type="text/javascript" src="/ext/designer.js"></script>
my issue is that when it calls the store the path is incorrect. "/Jobs/edit/" is the page that contains the js
https://www.mysite.com/Jobs/edit/app/store/JobTypes.js?_dc=1326712425128
So how can i use extjs ( in my existing web application ) so that it will use the correct paths.
here is designer js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'MyApp',
stores: [
'JobTypes',
'SalesContact',
'Job',
'AccountHandlers'
],
launch: function() {
Ext.QuickTips.init();
var cmp1 = Ext.create('MyApp.view.Jobs', {
renderTo: Ext.getBody()
});
cmp1.show();
}
});
I've tried the following after the config but it doesn't seem to override the path.
Ext.Loader.setPath('MyApp', '/Ext/App');
so you can set the app folder like so .
appFolder: '/ext/app',
Ext.application({
name: 'MyApp',
appFolder: '/ext/app',
stores: [
'JobTypes',
'SalesContact',
'Job',
'AccountHandlers'
],
launch: function() {
Ext.QuickTips.init();
Ext.Loader.setPath('MyApp', '/Ext/App');
var cmp1 = Ext.create('MyApp.view.Jobs', {
renderTo: Ext.getBody()
});
cmp1.show();
}
});