I am new to ExtJS. Currently I have grid implemented as shown below.
But I want to show the same information in a different way like showing in boxes, as shown below. How do I implement this?
You haven't specified which version of Ext JS you are using. So, will give you solution for both versions:
In ExtJS 3.x
You can make use of the Ext.DataView class. Here is an example of dataview. Even though the example makes use of the images, you can easily modify the view, but changing the template. Now, you have to work on the pagination bar. You will have to make use of the bbar property and create a toolbar. This toolbar will have your navigation buttons. So, you will have something like this:
var panel = new Ext.Panel({
id:'person-view',
frame:true,
title:'User Grid',
bbar: [{
text: Prev,
iconCls: 'prev-icon'
},{
text: Next,
iconCls: 'next-icon'
}],
items: new Ext.DataView({
store: yourStore,
tpl: yourTemplate,
autoHeight:true,
multiSelect: false,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No users to display',
})
});
[Obviously, the above code is not complete. You will have to add your store, template, other properties and event listeners according to user needs.]
In ExtJS 4.x
You will have to make use of Ext.view.View class. Here is a skeleton code:
Ext.define('MyApp.view.members.Display',{
extend: 'Ext.panel.Panel',
alias : 'widget.memberslist',
initComponent: function() {
this.template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="member">',
'Name : {name} <br/>',
'Title : {title}',
'</div>',
'</tpl>'
);
this.store = Ext.create('MyApp.store.Members');
this.bbar = this.buildToolbar();
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function() {
return [{
xtype: 'dataview',
store: this.store,
id: 'members',
tpl: this.template,
itemSelector: 'div.member',
overItemCls : 'member-hover',
emptyText: 'No data available!'
}]
},
buildToolbar : function() {
return [{
text: 'Previous',
action: 'prev'
},{
text: 'Next',
action: "next"
}];
}
});
The above code makes use of the new MVC architecture. You will have to add the event listeners etc in your controller.
Related
I am trying to create a list of links from a data store, and then use an XTemplate to loop through and display all the links in the data store. I am trying to display the links in a modal window. This is my code:
var win;
var tpl = new Ext.XTemplate("<p>Field1: {f1}, Field2: {f2} </p>").compile();
var data = {
f1: 'a',
f2: null
};
if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'component',
autoEl: {
html: '<input type="text">'
},
listeners: {
render: function(_component) {
_component.getEl().on('keyup', function(e) {
//console.log(this);
console.log(this.dom.childNodes[0].value);
});
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data,
renderTo: Ext.get('hello-win')
}
]
});
}
win.show(this);
There are no errors in console, but the links never load. It just shows my modal window and my textbox, but no links. I would put in in a jsfiddle, but I don't know how (I'm new to ExtJs).
How can I display a list of links in this modal window?
You should not define renderTo in you panel config. Component defined in items array will be rendered to parent component automatically.
Your window have two items so you can not use fit layout. This layout can be used only if component have only one child component. You can remove layout definition and Ext JS framework will use auto layout or you can use some layout which support more child items, like hbox, vbox, etc.
Your code should look like this:
var win = new Ext.Window({
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'textfield',
enableKeyEvents: true,
listeners: {
keyup: function(c) {
console.log(c.getValue());
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data
}
]
});
Also you should consider using textfield component instead of creating textfield by using component with autoEl config.
I am almost new to sencha touch and I have this simple question:
I have a panel with a search field and a start search button (a simple search):
items: [{
xtype: 'container',
html: '<div style="width:100%;text-align:center;"><img src="images/logo.png" style="max-width:40%;" /></div>',
},{
xtype: 'fieldset',
title: '<center>Insert your adress</center>',
cls:'ps-red',
items: [{
xtype: 'textfield',
name: 'adress',
required: true,
clearIcon: true,
}]
},{
xtype:'button',
text:'Search',
ui:'confirm-round',
margin:5,
handler:function(){
}
}]
Clicking on the search button I need to make an ajax call with the input text params, and display results to another panel. What should I write in the handler function of the button?
Ext.define('Demo.view.SearchResults', {
extend: 'Ext.Container',
xtype: 'resultcard',
config: {
layout:'fit',
cls:'ks-basic',
items: [{
xtype: 'dataview',
scrollable: 'vertical',
cls: 'dataview-basic',
store: '????',
}]
}
});
OK let us assume the store as 'SampleStore'
this is the sample call that you should write in handler function, see if it is useful to you,in this example I added push view, you can update panel if you want
handler : function(){
var navigationView = button.up('navigationview');
Ext.getStore('SampleStore').getProxy().setExtraParam('search',address);
Ext.getStore('SampleStore').load({
callback: function(record, operation, success) {
if(success && record.length) {
// here you can call any other function to update panel
navigationView.push({
xtype : 'resultcard',
record : record
});
} else {
Ext.Msg.alert('Address not found. (' + address + ')');
}
}
});
}// handler close
So, I'm trying to write a little MVC application which uses lists a lot.
I have one view which consists of a Panel with Toolbar docked to top and List:
app.views.SalonListView = Ext.extend(Ext.Panel, {
layout: 'card',
cardSwitchAnimation: 'slide',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top'
}
],
items: [
{
xtype: 'SalonList',
id: 'salon-list'
}
]
});
Ext.reg('ListView', app.views.SalonListView);
I have an xtype for list defined in another file:
app.views.SalonList = Ext.extend(Ext.List, {
layout: 'card',
itemTpl: // some tpl is here
});
Ext.reg('SalonList', app.views.SalonList);
As you may notice, I don't set the Store for my List.
What am I trying to achieve is to set store in any Controller I use with this view.
Something like:
salonList: function() {
app.stores.SalonStore.read();
this.salonsView = this.render({
xtype: 'SalonListView',
// so I need to set store for the list somewhere around here
});
}
Is there any possibility I can set the Store for the List dynamically?
I'm trying to get my test project working and have it set out with various viewports js files for each screen. I have now managed to load the data onto the screen with the code below however I am struggling with trying to set-up the onItemDisclosure function so that it switches to a detailed view which shows more information about the selection item.
MobileApp.views.Settings_screen = Ext.extend(Ext.Panel, {
title: "Settings ",
iconCls: "settings",
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: "toolbar",
title: "Settings"
}],
initComponent: function() {
detailPanel = new Ext.Panel({
id: 'detailPanel',
tpl: 'Hello, World'
}),
this.list = new Ext.List({
id: 'indexlist',
store: MobileApp.listStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: false,
onItemDisclosure: function() {
MobileApp.views.setActiveItem('detailPanel');
}
});
this.items = [this.list];
MobileApp.views.Settings_screen.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('settings_screen', MobileApp.views.Settings_screen);
I have tried to put some code here to switch to the detailPanel but it comes up with an undefined error.
onItemDisclosure: function() {
MobileApp.views.setActiveItem('detailPanel');
}
Thanks Aaron
You need to define this panel under Settings_screen's namespace, like this:
this.detailPanel = new Ext.Panel({
id: 'detailPanel',
tpl: 'Hello, World'
}),
Also, you need to add the detailPanel to the Settings_screen's items, so that it will become an item of it.
this.items = [this.list, this.detailPanel];
I am working with the Sencha touch framework and there list item component. I have only been working with this for about 2 weeks now and I can not figure out how to get the "onItemDisclosure" to open up the "detailPanel". I am trying to follow this example: http://vimeo.com/19245335. I have pasted my code below. Any help is very much appreciated.
GoW3Guide.views.detailPanel = Ext.extend(Ext.Panel, {
id: 'detailpanel',
tpl: 'Hello, {firstName}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
GoW3Guide.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});
Ext.reg('detailPanel', GoW3Guide.views.detailPanel);
GoW3Guide.views.listPanel = Ext.extend(Ext.List, {
id: 'disclosurelist',
store: GoW3Guide.ListStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
GoW3Guide.views.detailPanel.update(record.data);
GoW3Guide.views.Guidescard.setActiveItem('detailpanel');
}
});
Ext.reg('listPanel', GoW3Guide.views.listPanel);
GoW3Guide.views.Guidescard = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
items: [GoW3Guide.views.listPanel, GoW3Guide.views.detailPanel]
});
GoW3Guide.views.Guidescard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('guidescard', GoW3Guide.views.Guidescard);
Are you getting any javascript errors?
According to the docs setActiveItem either needs a component instance, a number (card index), or a config object, e.g. {xtype:'detailPanel'}
If you want to make a new detail panel active try
GoW3Guide.views.Guidescard.setActiveItem({xtype:'detailpanel'});
or
GoW3Guide.views.Guidescard.setActiveItem(new GoW3Guide.views.detailPanel());