Related
I was using ExtJS 3.2 and to make the tree panel work I have taken reference from below link and was able to get that done.
https://www.assembla.com/code/yamt/subversion/nodes/trunk/web/js/extjs/examples/ux/XmlTreeLoader.js?rev=9
Now I have to migrate that code in ExtJS 4.1, where I am geeting errors for this code, because Ext.tree.TreeLoader is not working there. So what would be the minimal changes in the same code to make the things work in ExtJS 4.1.
Try the following code.This code is taken from Sencha API.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
Refer API for more details.
I am using ExtJS portal code in my application
I want to make portlet in collapsed state at the time of loading the page. So I have done something like
items: [{
id: 'portlet-1',
title: 'Grid Portlet Texsds',
tools: this.getTools(),
height:200,
**collapsed:true,**
autoScroll :true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this),
'endDrag': Ext.bind(this.onPortletDrag, this),
'resize' :Ext.bind(this.onPortletResize, this)
}
}
I have made collapsed property to true. But because of this when I am trying to expand the portlet [after page load] I can see blank Grid.Plz. refer the attached image.
What is the problem ? do I need to do refresh or something ? because when I set collapsed to false I can see the grid.
Please suggest what is missing here.
This is a code for the getTools: function(){
{
type: 'Minimize',
handler: function(e,target,panelHeader,tool){
//panelHeader.ownerCt.toggleCollapse();
if (panelHeader.ownerCt.collapsed)
{
panelHeader.ownerCt.expand();
}
else {
panelHeader.ownerCt.collapse();
}
}
}
for the first time when the portlet get load it is in collapsed state, Now when I click on cross icon not [the "^" for expand icons ] I can see the Blank grid.
Hope this time I am able to explain well.
I took the Ext JS 4 example portal app and added your code (without the asterisks) to portlet-1. It is properly collapsed on load and expands to show the grid.
I don't think there is anything wrong with the code you've posted. Perhaps you've changed the layout or layout properties of the surrounding container and that is affecting your portlet.
Here is my complete portal.js:
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
//requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Loading...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
collapsed: true,
height: 200,
autoscroll: true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
I'm trying to create a tabpanel view that contains a splitview controller on the first tab. Think "kitchen sink" demo placed into one tab of a tabpanel.
The others do not contain the nestedlist.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
I've tried placing the nestedlist into a container, which you can see in some of the commented code shown below.
At the moment, this working code only shows the nestlist taking up the entire section on the first tab:
Ext.application({
name: 'Test',
requires: [
'Ext.dataview.NestedList',
'Ext.navigation.Bar'
],
launch: function() {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
id: 'tab4',
title: 'Tab4',
iconCls: 'star',
xtype: 'container',
items: [{
xtype: 'nestedlist',
displayField: 'text',
docked: 'left',
store: store
}, {
html: 'Detail View'
}]
}, {
id: 'tab2',
title: 'Tab2',
iconCls: 'star',
html: 'No nav bar?'
}, {
id: 'tab3',
title: 'Tab3',
iconCls: 'star',
html: 'Screen3'
}]
}).setActiveItem(0);
}
});
Store setup:
Ext.Loader.setConfig({ enabled: true });
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
}, {
text: 'Wasabi Peas',
leaf: true
}]
}
]};
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: data
});
Okay. I have created this example for you: http://www.senchafiddle.com/#ynn40
You can also download the whole source from here: http://rwd.me/FG5s (quite large as it includes the SDK)
Be sure to look through all the files as I have added lots of documentation.
Some notes:
I created a new component called Sencha.view.SplitView. This obviously can be called anything. It has a xtype of splitview so we can simply just require it and include it into our Main.js file (which is a Ext.tab.Panel.
{
xtype: 'splitview',
title: 'SplitView',
store: 'Items'
}
Because this is an item inside a tabPanel, we need to give it the title configuration too. Of course we could include this Splitview component anywhere.
As you can see it has a store configuration which is defined in SplitView:
config: {
/**
* We create a custom config called store here so we can pass the store from this component
* (SplitView) down into the nested list when it updates. Checkout {#link #updateStore}
* #type {Ext.data.Store}
*/
store: null
}
This is used to pass the store from the splitview to the nested list (we will get to that in a second). Of course that configuration will do nothing unless we add the appropriate methods to update the nested list:
/**
* This is called when the {#link #store} config has been updated.
* We simply check if the nested list has been created, and if it has, set the store
* on it with the new value.
*/
updateStore: function(newStore) {
if (this.nestedList) {
this.nestedList.setStore(newStore);
}
}
As you can see, we are simply updating the nestedList (if it exists) store with the new value of the SplitView store.
Inside the initialize method of SplitView, we created both the detailContainer (where the detail card of the nested list should go) and the nestedList and then add them to the SplitView. Make sure you look at some of the configurations that we give nestedList as they are important. The store configuration:
// Set the store of this nested list to the store config of this component (Splitview)
store: this.getStore()
The detailCard and detailContainer configurations:
// Tell the nested list to have a detail card and put it inside our new detailContinaer
detailCard: true,
detailContainer: this.detailContainer
And of course the listeners so we know when things get changed:
// And finally add a listener so we know when to update the detail card
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
Finally we add the onLeadItemTap method into the Splitview (we added the listener above) which should update the detail card with new information:
/**
* This is called when a leaf item is tapped in the nested list, or when the detail card
* should be updated. In here, we just get the record which was tapped and then set the HTML
* of the detail card.
*/
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
detailCard.setHtml(record.get('text'));
}
Hopefully this makes sense and helps you. If not, let me know.
I've got some HTML content that is longer than a full page in height. At the end of this content, I'd like to include a horizontal carousel. Every attempt I make shows the HTML content, but I can't get the carousel to work properly.
Here's where I'm at code-wise...
Ext.create('Ext.Container', {
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'panel',
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
},
{
xtype: 'carousel',
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
}
]
});
Any help greatly appreciated.
I have expirience with Sencha 1.1. I have no idea if your syntax is for 1.1 or 2.
i played a little with your code, and here it goes.
Ext.setup({
onReady: function() {
var panel= new Ext.Panel({
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
});
var carousel = new Ext.Carousel({
flex:1,
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [panel, carousel]
});
}
});
The big thing that was missing to you is the flex:1 property. This is why it didin't appear in your screen. Its highly crucial.
I'm in need of a simple nested list-view example. Something along the lines of this...
(source: roosteronacid.com)
When you click an item, you will transition (slide) to the next view/card containing another list, with a "back"-button in the top-menu. And so on and so forth.
The lists doesn't necessarily have to three levels deep. I'd like an example which includes, say, one item with three sub-items, and one item which takes you directly to the "final" view.
you should look into the sencha touch videos on vimeo. here is one that answers your question:
http://vimeo.com/20580117
Try the code given below it will help you understand the basic functionality of created a nested list using sencha touch.
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
}, {
text: 'Coffee',
leaf: true
}, {
text: 'Espresso',
leaf: true
}, {
text: 'Redbull',
leaf: true
}, {
text: 'Coke',
leaf: true
}, {
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
},{
text: 'Wasabi Peas',
leaf: true
}]
},{
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var leftNav = new Ext.NestedList({
dock: 'left',
useTitleAsBackText: true,
title: '',
displayField: 'text',
width: '350',
store: store
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems:[leftNav]
});
}
})
Following link will help you to find more info easily http://dev.sencha.com/deploy/touch/docs/.
Also look for examples in the sencha touch downloadable package.
Ignoring the PhoneGap stuff at the start, this tutorial has most of what you need.
That's really easy to do. Check out the Nested List in the Kitchen Sink under User Interface examples and click the "Source" button to see the code..
I went with a different approach, using raw HTML.