I am new in Extjs, following is my code:
children: [{
text:'Basic Ext Layouts',
expanded: false,
children:[{
text:'Absolute',
id:'absolute',
leaf:true,
},{
I was trying to make it like
children: [{
name:'Basic Ext Layouts',
expanded: false,
children:[{
name:'Absolute',
id:'absolute',
leaf:true,
},{
but its not working, please tell me solution
Set displayField config to 'name':
Ext.create('Ext.tree.Panel', {
displayField: 'name',
// ...
});
UPDATE
You also have to create Model for your treestore and append 'name' to it's fields config:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [ 'name' ]
});
Here is working example.
Related
I have a Panel where I render a search-form. This works.
My problem is rendering a List under that search-form (so in the same Panel).
This is what I've done so far:
Ext.define("TCM.view.UserSearch",
{
extend: "Ext.form.Panel",
requires:
[
"Ext.form.FieldSet",
"Ext.List"
],
xtype: "usersearch",
config:
{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var clubsStore = Ext.create('TCM.store.Clubs');
clubsStore.load();
var usersStore = Ext.create('TCM.store.Users');
var searchButton =
{
xtype: 'button',
ui: 'action',
text: 'Search',
handler: this.onSearchButtonTap,
scope: this
};
var topToolbar =
{
xtype: 'toolbar',
docked: 'top',
title: 'Search',
items: [
{ xtype: 'spacer' },
searchButton
]
};
var userClub =
{
xtype: 'selectfield',
store: clubsStore,
name: 'clubId',
label: 'Club',
displayField : 'name',
valueField : 'id',
required: true
};
var userList =
{
xtype: 'list',
store: usersStore,
itemTpl: '{name}',
title: 'Search results'
};
this.add([
topToolbar,
{
xtype: "fieldset",
items: [userClub]
},
userList
]);
},
onSearchButtonTap: function ()
{
console.log("searchUserCommand");
this.fireEvent("searchUserCommand", this);
}
});
I can't see anything being rendered under the fieldset (the searchform). What could be wrong?
Most of time, when you don't see a component it's because you did not set a layout to your container or a height.
You can find more about layout here.
In your case, you want to have two components in your container. Therefore, I suggest a Vbox layout.
Here's an example
Hope this helps.
I actually used something like this in a project try this...Put this in the items property of your fieldset...
{
xtype: 'searchfield',
clearIcon: true,
placeHolder: 'Type Some text'
},
{
xtype: 'list',
hidden:true, //Initially hidden populate as user types something
height: '150px',
pressedDelay: 1,
loadingText: '',
store: 'listStore',
itemTpl: '{\'What you want to be displayed as per your model field\'}'
}
In your controller write a handler for the keyup event of the searchfield to load the store with relevant data and toggle the hidden property of the list. Hopefully list should appear with the search results(Worked for me and looked quite good). Hope this helps...
I'm trying to display a list of simple data in Sencha-Touch 2. For some reason, It's not displaying the data and I'm unable to figure it out. I'm getting two title bars: the correct title with "Recent Posts" and a blank one underneath. I don't know why it is coming like this. Perhaps that's conflicting with the rest of the display?
Ext.define('GS.view.NewBlog',{
extend: 'Ext.navigation.View',
xtype: 'newblog',
requires: [
'Ext.dataview.List',
'Ext.TitleBar'
],
config: {
title: 'Blog',
iconCls: 'star',
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Recent Posts'
}, // end items
store: {
fields: ['title','author'],
data: [
{title: 'This is the first Title', author: 'John Smith'},
{title: 'This is the second title', author: 'Jane Doe'}
] // end data
} // end store
}, // end config
itemTpl: '{title}'
});
You need to define a Store:
Ext.define('GS.store.Posts', {`
extend: 'Ext.data.Store',`
config: {
data: [
{
title: 'This is the first Title',
author: 'John Smith'
},
{
title: 'This is the second title',
author: 'Jane Doe'
}
],
storeId: 'Posts',
fields: [
{
name: 'title'
},
{
name: 'author'
}
]
}
});
Define the Panel with a List using the Store:
Ext.define('GS.view.NewBlog', {
extend: 'Ext.Panel',
alias: 'widget.NewBlog',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Recent Posts'
},
{
xtype: 'list',
itemTpl: [
'<div>{title} - {author}</div>'
],
store: 'Posts'
}
]
}
});
Your app.js:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
stores: [
'Posts'
],
views: [
'NewBlog'
],
name: 'GS',
launch: function() {
Ext.create('GS.view.NewBlog', {fullscreen: true});
}
});
Title Bar is showing twice because you are using Ext.navigation.View, which by default has titlebar. And you are adding one more title bar in the items.
Now define store and itemtpl inside an item, within config. You can define store seperately and mention the id of the store inside store.
items : [{
xtype : 'list',
store: 'store id goes here,
itemTpl: '{title}'
}]
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 sencha touch and trying to build a list from an array. I use Ext.data.ArrayStore and having trouble.
My code:
var ListStore = new Ext.data.ArrayStore({
autoLoad:myData,
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
fields: [
'product',
{name: 'product', type: 'string'},
{name: 'id' , type: 'string'}
]
});
Code of the Panel which includes the list:
var listPanel = new Ext.Panel({
dockedItems: [{
xtype: 'toolbar',
ui: 'light',
title: 'Product List',
items: [{
text: 'Back',
ui: 'back',
handler: backHandler
}]
}],
layout: 'fit',
scroll: 'vertical',
style: 'background-color:#FFFFF',
items: [
{
xtype:'list',
store:ListStore,
itemTpl: '<div class="product"><strong>{product}</strong></div>',
grouped:true,
indexBar:true
}]
First of all, Swar's answer seems perfectly correct. Create a store like that, pass your data as the data config option when creating an Ext.data.Store instance.
If you've Ext.define()-ed your own store subclass (without a proxy), you can either add the data when you create() your instance, like this:
Ext.define('MyApp.store.MyStore', {
extends: 'Ext.data.store',
model: 'Demo'
});
myStore = MyApp.store.MyStore({data: arrayOfDemoItems});
Or altertanively, if you already have a store instance (e.g. auto-created by a controller):
Ext.define('MyApp.controller.MyController',{
extend: 'Ext.app.Controller',
stores: ['MyStore'],
init: function () {
// You add your items here
var myStore = this.getMyStoreStore();
myStore.data.addAll(this.getMyItemsSomehow(););
// Note that the 'load' event is not fired if you load elements like this,
// you have to do it manually if you have e.g. a DataView tied to the store:
myStore.fireEvent('load', myStore);
},
getMyItemsSomehow: function () {
// Return an array of items somehow...
return [{id: 1, product: 'Spencer'}];
}
});
Create a Model first.
Ext.regModel('Demo', {
fields: [
{name: 'id', type: 'string'},
{name: 'product', type: 'string'}
]
});
Then create the store:
new Ext.data.Store({
model: 'Demo',
data : [
{id: '1', product: 'Spencer'}
]
});
And as far I can understand from your code, in "autoLoad" option of Store, it should boolean or object which is not the data but options for the store load() method.
I have taken the form example from Sencha Touch API
var form = new Ext.form.FormPanel({
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}
]
});
and I have created a timeline object using
timeline = new Ext.Component({
title: 'Loan Details',
cls: 'timeline',
scroll: 'vertical',
tpl: ['<div></div>']
});
and then added the timeline to the panel as:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'light',
items: [timeline]
});
How can I add the form object to the timeline? Like how I can show that on it? Where I should add it?
Thanks for the response in advance.
I'm not sure what you are trying to do. Are you trying to have some kind of continuous carousel where you will put the FormPanel?
If so you should extend the Ext.Panel to make that timeline object and then as item use the xtype:'fieldset' and have the form items there.
For example:
App.views.Timeline = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this, {
title: 'Loan Details',
cls: 'timeline',
scroll: 'vertical',
items:[
{
xtype: 'fieldset',
defaults: {
labelAlign: 'left',
labelWidth: 'auto',
}
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}
]
}
]
});
}});
the Ext.Component is for showing data through the data property. The data is display according to the template you provide i.e. the tpl property but you need to specify the property of the objects you want to show. For example tpl:<div>{text}</div> and data:[{text:'Example'}]