I am new to sencha touch and saw all videopodcasts but still don't understand how to "display" a panel from a tabbar (the bar on top!) and how to switch from a panel to another without any slide or something (just display it please!)
There is more on the road like having a preloader and fetch the data from JSON and then display the nested list. But for now I am stuck in this simple scenario...
here is what I have so far...
This is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Sencha 3</title>
<script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap.js"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/views/startcard.js" type="text/javascript"></script>
<script src="app/views/secondcard.js" type="text/javascript"></script>
<script src="app/views/plain.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>
</head><body></body>
app.js
Testdemo = new Ext.Application({
name: "TestDemo",
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('startcard');
}
});
Viewport.js
TestDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'startcard'},
{ xtype: 'secondcard'},
]
});
TestDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
startcard.js
myPrefs = function() {
//here is the problem! How can I display the panel myPrefs??
this.StartCard.setActiveItem('myPrefs', {type:'slide', direction:'down'});
}
refreshHome = function() {
alert("Refresh me!");
}
var somelist = new Ext.Component({
title: 'testline 1',
cls: 'info',
html: 'This is plain Text.<br />Some JSON-Data should be listed here...'
})
TestDemo.views.StartCard = Ext.extend(Ext.Panel, {
title: "TestDemo",
iconCls: "home",
styleHtmlContent: true,
scroll: 'vertical',
initComponent: function() {
Ext.apply(this, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'Some Test App',
items: [
{
iconMask: true,
ui: 'plain',
iconCls: 'settings',
itemId: 'btnHomeMore',
title: 'Do I need a title???',
handler: myPrefs
},
{
xtype: 'spacer'
},
{
iconMask: true,
ui: 'plain',
iconCls: 'refresh',
itemId: 'btnRefreshMe',
title: 'Refresh, i guess',
handler: refreshHome
}
]
}
],
items: [
{
itemId: 'MyStartPage',
html: 'This is just a test'
}
]
});
TestDemo.views.StartCard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('startcard', TestDemo.views.StartCard);
Ok, it isn't exactly clear what the question is from your description so I will try to help with all your points.
With a TabBar you 'display' a panel by making it the active one. By default the first item is displayed.
In ViewPort.js, you will need to add a property 'text' to the items so that the tab has the proper text.
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'startcard', text: 'Start Card'},
{ xtype: 'secondcard', text: 'Second Card'},
]
});
However I don't see your 'secondcard' type defined anywhere so it may be throwing an error. You should load up your page in Chrome/Safari and see if it displays any JS errors using the Developer Console. These errors will prevent behaviour of the components from working properly.
Clicking on the button for that tab will now switch to that card using whatever animation you have configured as the 'cardSwitchAnimation' for the TabBar.
Related
Is there a way to implement a Defect Suite Popover within a Rally Grid that allows for viewing Defect Suites associated with a Defect? Currently, only the count of Defect Suites for a given Defect seems available.
This one took a little bit of tinkering, but here's what I came up with. I included the full app because there are a few moving parts. Basically this setup mirrors the way the other existing popovers are built (Defects, Tasks, etc.)
First we define a popover. I borrowed code from the TaskPopover as a starting point and then updated the parentProperty and childField configs near the bottom and changed the columns to be shown.
Next we define a status template to render the defect suite count in the grid. Again, I borrowed code from the TaskStatusTemplate as a starting point and just tweaked it a little bit to show the right data. There is some css at the bottom of the app to style it as well.
Finally, in the sample app included I add a grid of defects that all contain defect suites to test it. There are two little overrides at the beginning of the launch method to completely wire up the popover.
Hope that gets you started!
<!DOCTYPE html>
<html>
<head>
<title>DefectSuitePopover</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
//
//Define the popover
//
Ext.define('DefectSuitePopover', {
alias: 'widget.defectsuitepopover',
extend: 'Rally.ui.popover.ListViewPopover',
title: 'Defect Suites',
titleIconCls: 'icon-defect-suite',
width: 700,
constructor: function (config) {
config.listViewConfig = Ext.merge({
gridConfig: {
addNewConfig: {},
columnCfgs: [
{
dataIndex: 'FormattedID',
width: 90
},
{
dataIndex: 'Name',
flex: 1
},
{
dataIndex: 'Owner',
width: 90
},
{
dataIndex: 'ScheduleState',
width: 55
}
],
storeConfig: {
context: config.context
}
},
model: Ext.identityFn('DefectSuite'),
parentProperty: 'Defects',
childField: 'DefectSuites'
}, config.listViewConfig);
this.callParent(arguments);
}
});
//
//Define the status template for the grid to launch the popover
//
Ext.define('DefectSuitesStatusTemplate', {
extend: 'Rally.ui.renderer.template.status.StatusTemplate',
inheritableStatics: {
onClick: function(event, ref) {
Rally.ui.renderer.template.status.StatusTemplate.onClick(event, ref, {
field: 'DefectSuite',
target: event.target,
targetSelector: 'a.id-' + Rally.util.Ref.getOidFromRef(ref)
});
}
},
constructor: function() {
this.callParent([
'<tpl if="this._getCount(values) > 0">',
'<a class="defect-suites-count id-{[values.ObjectID]}" onclick="{[this._getOnClick(values)]}">',
'{[this._getCount(values)]}',
'</a>',
'</tpl>'
]);
},
_getCount: function (recordData) {
return recordData.DefectSuites.Count;
},
_getOnClick: function(recordData) {
return 'DefectSuitesStatusTemplate.onClick(event, \'' + recordData._ref + '\'); return false;';
}
});
//
//Define the app
//
Ext.define('DefectSuitePopoverApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Add the new status template
Rally.ui.renderer.RendererFactory.fieldTemplates.defectsuites = function() {
return Ext.create('DefectSuitesStatusTemplate');
};
//Register the popover
Rally.ui.popover.PopoverFactory.popovers.DefectSuite = function(config) {
return Ext.create('DefectSuitePopover', config);
};
//Add grid
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'Owner',
{
dataIndex: 'DefectSuites',
align: 'center'
},
'Tasks',
'State'
],
context: this.getContext(),
enableEditing: false,
showRowActionsColumn: false,
storeConfig: {
model: 'defect',
filters: [{
property: 'DefectSuites.ObjectID',
operator: '!=',
value: null
}]
}
});
}
});
Rally.launchApp('DefectSuitePopoverApp', {
name:"DefectSuitePopover",
parentRepos:""
});
});
</script>
<style type="text/css">
.app a.defect-suites-count {
cursor: pointer;
color: #337ec6;
}
</style>
</head>
<body>
</body>
</html>
I would like to filter User Stories for each Project I have in Rally and not just for the one that is currently selected. Is it possible?
This code uses rallyprojectpicker and refreshes the grid based on the project selection:
<!DOCTYPE html>
<html>
<head>
<title>Stories By Project</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'projFilter'
},
{
xtype: 'container',
itemId: 'grid'
}
],
launch: function() {
this.down('#projFilter').add({
xtype: 'rallyprojectpicker',
itemId: 'projPicker',
workspace: '/workspace/12352608129',
value: '/project/12527515559', //default
listeners: {
change: this._onProjectChange,
scope: this
}
});
},
_onProjectChange: function()
{
if(!this.model) {
this._retrieveModel();
} else {
this._refreshGrid();
}
},
_retrieveModel: function(comboBox) {
Rally.data.ModelFactory.getModel({
type:'UserStory',
success:this._onModelRetrieved,
scope: this
});
},
_refreshGrid: function() {
this.grid.reconfigure(this._buildStore());
},
_buildStore: function() {
return Ext.create('Rally.data.WsapiDataStore', {
model: this.model,
autoLoad: true,
context: {
projectScopeUp: false,
projectScopeDown: false,
project: this.down('#projPicker').getValue()
}
});
},
_onModelRetrieved: function(model) {
this.model = model;
this.grid = this.down('#grid').add({
xtype:'rallygrid',
store: this._buildStore(),
columnCfgs:[
'FormattedID',
'Name'
]
});
}
});
Rally.launchApp('CustomApp', {
name: 'Stories By Project'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
I am trying to figure out a basic implementation of infinite scrolling in a ExtJs 4.1.0 grid.
I am working off this example http://ext4all.com/post/extjs-4-1-grid-infinite-scroll-in-mvc and at this point my code is practically identical to the example.
When my page loads, the grid is filled with the first page of data as the first ajax request fires and works as expected. However, when I scroll down to the bottom of the grid, nothing happens... I am expecting to see an ajax request fire, grabbing additional data (as in the example).
Any ideas?
Here is my code:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="./extjs-4.1.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script type="text/javascript" src="./extjs-4.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="./test-scrolling.js"></script>
</head>
<body>
<div id="page">
<header>
<div class='wrap'>
<h1>Test</h1>
<div class='clear'></div>
</div>
</header>
<div class="content">
<div class="wrap">
<div id="main"></div>
</div>
</div>
</div>
</body>
</html>
Javascript
Ext.define('AP.model.Log', {
extend: 'Ext.data.Model',
fields: [
'Id',
'ProcessId',
'IndexRequest',
'AssetIndexStart',
'AssetIndexEnd',
'StartDate',
'EndDate']
});
Ext.define('AP.store.Log', {
extend: 'Ext.data.Store',
model: 'AP.model.Log',
autoLoad: true,
remoteSort: true,
buffered: true,
pageSize: 100,
proxy: {
type: 'ajax',
url: 'http://localhost/...',
limitParam: 'limit',
reader: {
type: 'json',
root: 'Log',
successProperty: 'Success'
}
}
});
Ext.define('AP.view.Log', {
extend: 'Ext.grid.Panel',
alias: 'widget.log',
title: 'Log',
store: 'Log',
initComponent: function () {
this.columns = [{
header: 'Index Start',
dataIndex: 'AssetIndexStart',
flex: 1
}, {
header: 'Index End',
dataIndex: 'AssetIndexEnd'
}, {
header: 'Start Date',
dataIndex: 'StartDate'
}, {
header: 'End Date',
dataIndex: 'EndDate'
}];
this.callParent(arguments);
}
});
Ext.define('AP.controller.Log', {
extend: 'Ext.app.Controller',
stores: ['Log'],
models: ['Log'],
views: ['Log'],
init: function () {}
});
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'AP',
appFolder: 'app',
controllers: [
'Log'],
launch: function () {
Ext.widget('log', {
title: 'Log',
width: 600,
height: 400,
renderTo: 'main'
});
}
});
When the application loads, it calls app.js (This is called in the index.html). What i want to do is when the app calls app.js, i need app.js to initialize the Main.js view.
in a nutshell, when app.js gets called, it should call the Main.js view.
How can i do this programatically;
app.js
//<debug>
Ext.Loader.setPath({
'Ext': 'lib/touch/src'
});
//</debug>
Ext.application({
name: 'My',
requires: [
'Ext.MessageBox'
],
views: ['Main'],
icon: {
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('My.view.Main'));
},
onUpdated: function() {
}
});
Main.js
Ext.define("My.view.Main", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});
Do this,
// Initialize the main view
Ext.Viewport.add({
xclass:'My.view.Main'
});
I am new to sencha touch so if someone can point me in the right direction that would be great. My problem is that I want to display data from my database. I seem to have everything working correctly when I inspect the elements I see the data but I can't see the data on the screen Here is my code:
getUserList.js
Ext.regModel("User", {
fields: [
"id",
"name",
"username",
"password",
"email",
"phone"
]
});
var myStore = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '../sencha/php/getUserList.php',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{id}">',
'<div class="thumb">title="{name}"></div>',
'<span class="x-editable">{name}</span></div>',
'<div style="background-color:#00F" class="thumb-wrap" id="{id}">{id}</div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var panel = new Ext.extend(Ext.Panel,{
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView',
initComponent: function() {
panel.superclass.initComponent.call(this);
},
items: new Ext.DataView({
store: myStore,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overItemCls:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
//panel.render(Ext.getBody());
Ext.reg('userPanel', panel);
index.html
<!DOCTYPE html>
User
<script type="text/javascript" src="sencha/sencha-touch.js"></script>
<script type="text/javascript" src="js/getUserList.js"></script>
<link href="sencha/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var topPanel = {
style: 'padding:15px; background-color: #F00',
html: 'color2'
};
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items:[{
xtype: 'userPanel'
}],
dockedItems: [topPanel]
});
}
});
</script>
</head>
<body></body>
Thanks for any help you can provide!
I figured it out, I had to add a layout to my xtype in my index.html file