<div id="wrap">
<table id="listTable"></table>
</div>
Case #1)
Ext.onReady(function () {
Ext.define("testClass", {
extend: 'Ext.panel.Panel',
title: 'Hello',
layout: 'fit',
items: { html: 'AAAA' },
renderTo : 'listTable'
}, function () {
var cls = new testClass();
});
});// end onReady
Case #2)
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
items: { html: 'AAAA' },
renderTo: 'listTable'
});
});// end onReady
Or do you have a better idea? Please advice me.
The second is correct. Why define a class if you're only going to use it once?
Related
I would like to link a list to another view (carousel layout), for example carousel item no. 2.
What should I put in this bracket?
onItemDisclosure: function() {
[......]
}
I want to achieve something like carousel.setActiveItem(x)
where x is my carousel content.
I have worked on your problem. May be this helps you.
app.js
Ext.application({
name: "FrontApp",
models: ["mymodel"],
stores: ["mystore"],
controllers: ["FrontAppController"],
views: ["front","carousel"],
launch: function () {
var frontView = {
xtype: "frontview"
};
var Carousel = {
xtype: "carousel"
};
Ext.Viewport.add([frontView,Carousel]);//views called by x-type
}
});
front.js
Ext.define("FrontApp.view.front", {
extend: "Ext.Panel",
alias: "widget.frontview",
config: {
layout: {
type: 'fit'
},
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'list',
itemId: 'myList',
scrollable: false,
itemTpl: '{firstName}',
store: 'mystore51',
onItemDisclosure: true,
}
],
listeners:
[
{
delegate: "#myList",
event: "disclose",
fn: "onListDisclose"
}
]
},
onListDisclose: function (list, record, target, index, evt, options) {
console.log("calling carousel..");
this.fireEvent("carouselCommand", this,record, target, index, evt, options);
}
});
carousel.js
Ext.define('FrontApp.view.carousel', {
extend: 'Ext.carousel.Carousel',
xtype: 'carousel',
config: {
items: [
{
xtype: 'panel',
html: 'hello1'
},
{
xtype: 'panel',
html: 'hello2'
},
{
xtype: 'panel',
html: 'hello3'
}
]
}
});
FrontAppController.js
Ext.define("FrontApp.controller.FrontAppController", {
extend: "Ext.app.Controller",
config: {
refs: {
frontView: "frontview",
carouselView:"carousel"
},
control: {
frontView: {
carouselCommand: "onCarouselCommand"
}
}
},
// Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
onCarouselCommand: function (list, record, target, index, e, eOpts) {
console.log("onCarouselCommand");
var a=this.getCarouselView().setActiveItem(index); // setting the carousel item according to list index.
Ext.Viewport.animateActiveItem(a, this.slideLeftTransition);
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}
});
onItemDisclosure: function(list, record, index) {
//switch the view to carousel (my main content view)
Ext.ComponentManager.get('comp').setActiveItem(1);
//set active item for carousel according to chosen list
Ext.ComponentManager.get('content').setActiveItem(index);
}
I am new to ExtJS and have written a sample App using Ext.application with Ext.direct. I configured my model as shown below
Ext.define('AM.model.UserModel', {
extend: 'Ext.data.Model',
alias : 'widget.userModel',
fields: ['SlNo','name']
proxy: {
type: 'direct',
directfn: HelloWorld.getGridDetails
}
});
and I am using grid Panel as shown below
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'Users',
initComponent: function() {
this.store = {
model:'AM.model.UserModel',
autoload:true,
};
this.columns = [
{
header: 'SlNo',
dataIndex: 'SlNo',
width:100,
disabled:false
},
{
header: 'Name',
dataIndex: 'name',
width:150
}
];
this.callParent(arguments);
}
});
finally my index.js looks like this
Ext.require('Ext.direct.*', function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
});
Ext.require([ 'AM.view.user.List','AM.model.UserModel']);
Ext.application({
name: 'AM',
appFolder:'myApp',
launch: function() {
Ext.Direct.addProvider(Ext.app.DirectAPI);
Ext.create('Ext.container.Viewport', {
items: {
xtype: 'userlist',
width: 552
},
renderTo: Ext.getBody()
});
}
});
The data I receive when I call HelloWorld.getGridDetails from index.js is as shown below
action: "HelloWorld",
method: "getGridDetails",
result: [
{slNo:2, name:"patton"},
{slNo:3, name:"Omar N Bradely"},
{slNo:1, name:"Sam Manekshaw"}
],
tid: 1,
type: "rpc"
The problem is that I am not able to load data in to the grid i.e, The direct method HelloWorld.getGridDetails is not at all getting called when the grid is displayed. Am I missing something? Can anyone of you please help?
Thanks
Kumar
I actually figured out the solution for this. Though it doesnt make sense now, better late than never. I need to modify the following in the index.html
<script type="text/javascript" src="Api.js"></script>
**<script type="text/javascript">Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);</script>**
<script type="text/javascript" src="index.js"></script>
After adding
<script type="text/javascript">Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);</script>
before index.js. It started working.
I am having a very hard time understanding why i can't go back to the previous panel within my application. Enough talk, some code
appsDetails = Ext.extend(Ext.Panel, {
layout: 'fit',
scroll: 'verticall',
initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
items: [{
ui: 'back',
scope: 'this',
handler: function() {
console.log(this.ownerCt) //This returns "undefined"
this.ownerCt.setActiveItem(this.prevCard, {
type: 'slide',
reverse: true,
scope: this,
after: function() {
this.destroy();
}
})
}
}]
}];
this.items = [{
styleHtmlContent: true,
tpl: description,
data: this.record.data
}];
appsDetails.superclass.initComponent.call(this);
}
});
I am getting to this view above by using this code below in the previous panel
selection: function(list, index) {
if (index[0] !== undefined) {
var details = new appsDetails({
homeCard: this.appsPanel,
record: index[0],
});
this.setActiveItem(details, {type: 'slide', direction: 'left'})
}
}
I have no problem getting to the desired panel but i can't come back the previous one.
Thx for your help
You are passing a string object with value 'this'. Change this line: scope:'this' in scope:this
I have set up a simple panel in Sencha Touch with 2 tabs:
ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
title: "home",
iconCls: "home",
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Playlist',
scroll: 'vertical',
html: 'test'
},{
title: 'Comments',
scroll: 'vertical',
autoLoad: {url: 'disqus.html', scripts: true}
}]
});
Ext.reg('homecard', ToolbarDemo.views.Homecard);
On the 'Comments' tab I am trying to include a disqus.html file which is at the same level as the index.html file for my app, but nothing is showing up. From googling about it would seem that I have entered the autoload code correctly, but perhaps I have missed out another step?
Could someone help me on my way?
Thanks,
Nick
Disqus code:
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'monthlymixup'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
var disqus_identifier = 'test';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
The "autoLoad" property is only in ext.js and not yet available in sencha-touch.
But you can do something like this (Your mileage WILL vary):
Ext.setup({
onReady: function() {
var tabPanel = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1',
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
},
{
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
Ext.Ajax.request({
url: 'disqus.html',
success: function(response, opts) {
tabPanel.items.get(2).update(response.responseText, true); //2nd parameter is "loadScripts"
}
});
}
});
(disqus.html)
<html>
<head>
</head>
<body>Hello World.</body>
</html>
I'd like to bring a piece of code that I use to get an external html. As you may note, you should use callback, instead of success function. Not sure why, often the result goes to failure function.
Ext.Ajax.request({
url: url,
method: 'GET',
callback: function(options, success, response) {
// do what you need with response.responseText
// I'm updating a panel with styleHtmlContent: true,
}
});
How can I add dynamically an new item in Ext.panel ? This is the code I'm using;
app.views.ViewItem = Ext.extend(Ext.Panel, {
id: '0',
dockedItems: [{
xtype: 'toolbar',
title: 'Melvin test',
items: [
{
text: 'Terug',
ui: 'back',
listeners: {
'tap': function () {
Ext.dispatch({
controller: app.controllers.appController,
action: 'backToRssList',
animation: {type:'slide', direction:'right'}
});
}
}
},
{xtype:'spacer'},
{
id: 'share',
text: 'Delen',
ui: 'action',
listeners: {
'tap': function () {
Ext.dispatch({
controller: app.controllers.appController,
action: 'share',
});
}
}
}
]
}],
items: [],
initComponent: function() {
app.views.ViewItem.superclass.initComponent.apply(this, arguments);
},
getView: function(data) {
//this.items.add({html: 'test'});
},
});
In the function getView I am trying to add an new item with this line;
this.items.add({html: 'test'});
The error that is showing up ( in Rockmelt, Chrome ) is;
Uncaught TypeError: Object #<Object> has no method 'getItemId'
Obviously this isn't working, what am I doing wrong?
Did you try using the add() function for the panel itself? E.g:
this.add({html: 'test'});