Related
I try to insert a NestedList in a TabPanel, but I get an empty list, the content is not displayed. How to make visible this Neestedlist
Code I tried:
Thank you in advance for your help
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
});
Ext.create('Ext.NestedList', {
fullscreen: true,
store: treeStore
});
Ext.application({
name: 'Sencha',
launch: function() {
// The whole app UI lives in this tab panel
Ext.Viewport.add({
requires: ['Ext.List', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
// This is the recent blogs page. It uses a tree store to load its data from blog.json.
{
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
cls: 'blog',
displayField: 'title',
store: treeStore
}
]
});
}
});
At the bottom of your provided code, in the Nested List you are creating, you are setting a displayfield property with a value of "title". Therefore the list is trying to use the "title" field from your model, which does not exist. Either change your store data to use "title" instead of "text", or remove the displayField property (as the default is already "text").
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'm new to HTML5 and using sencha touch.
Please anyone give me a full example of how to change the toolbar color.
I tried to do that using scss, but I didn't succeed.
Thanks to all answers,
Code:
//wrapped with css tag
#include sencha-toolbar-ui('yellow', #E9D890, 'bevel');
var loginPanel = new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
{
xtype: "form",
renderTo: document.body,
items: [
{
xtype: "textfield",
name: "username",
id:"txtusername",
label: "Username",
placeHolder: "your username here",
},
{
xtype: "passwordfield",
name: "password",
id:"txtpassword",
label: "Password",
placeHolder: "your password here"
},
{
width:100,
xtype:"button",
iu:"action",
text: "log in",
handler:logIn
}
]
}
],
dockedItems: [
{
xtype:"toolbar",
dock: "bottom",
items: [
{
iconMask: true,
iconCls:"team",
handler:tapfbHandler,
}
]
},
{
xtype:'toolbar',
dock:'top',
title:'app name',
ui:'yellow'
}]
});
Do I have to include any style file?
Thanks.
You first can try to change your Toolbar UI :
dockedItems: [
{
xtype:"toolbar",
dock: "bottom",
ui = "light",
...
Try it.
You also have the opportunity to custom your layout with specific color. I never do this, but a lot of doc is present over internet :
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
http://existdissolve.com/2011/03/sencha-touch-theming-building-our-custom-stylesheet-with-sass
http://superdit.com/2011/07/22/sencha-touch-references-and-tutorial-collection/
Here is the doc for Toolbar :
http://docs.sencha.com/touch/1-1/#!/api/Ext.Toolbar
let us know what happend
Edit : To compile your Scss (Saas), try this : compass compile path/to/scss
here is a good guide all is wrote http://www.sencha.com/forum/showthread.php?127607-Mastering-the-Compass-SASS-Setup-with-Sencha-Touch
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.