I am trying follow the list-horizontal example given by Sencha.
I am getting a message saying
( The base layout for a DataView must always be a Fit Layout )
In the example it is not a fit layout. Could someone please tell me what I am missing here.
Thanks
Jim
Ext.define( 'Styles.view.Beginning', {
extend: 'Ext.List',
xtype: 'beginninglist',
config: {
title:'Beginning',
iconCls: 'star',
layout:{
type:'vbox',
pack: 'center'
},
items:[
{
//give it an xtype of list for the list component
xtype: 'dataview',
height: 250,
scrollable: 'horizontal',
directionLock: true,
inline: {
wrap: false
},
//set the itemtpl to show the fields for the store
itemTpl: '{name} {image}',
//bind the store to this list
store: 'Beginning'
}
]
}
});
First of all, you need to learn Sencha layouting. You can refere here. You were creating a List and then trying to put Dataview inside that. So if you need Dataview, directly extend Dataview like below:
Ext.define('Styles.view.Beginning', {
extend: 'Ext.dataview.DataView',
xtype: 'beginninglist',
config: {
inline: {
wrap: false
},
scrollable: {
direction: 'horizontal'
},
//set the itemtpl to show the fields for the store
itemTpl: '{name} {image}',
//bind the store to this list
store: 'Beginning'
}
});
Related
So I'm trying to display the number of rows (records) returned from a grid. Here's the code:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: '<center>Data Management</center>',
store: 'Users',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'tbtext', text: 'Number of Records\:' + ***code that will return number of records*** },
{ xtype: 'tbfill' },
{ text: 'Print' },
{ text: 'Export' }
]
}],
...
I'm not sure how to use the getCount() method to return the number of rows from this grid (or store?). Any ideas?
Heres: my store:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
fields: ['field1', 'field2', 'field3'],
data: [
{field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'},
{field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'},
{field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'}
]
});
You won't be able to do this dynamically, where it updates on its own, so you will have to use a placeholder and update the panel when the store is loaded.
{ xtype: 'tbtext', itemId: 'numRecords' }
Then:
listeners: {
render: function(store) {
store.on('load', function(records) {
var count = records.length; //or store.getTotalCount(), if that's what you want
grid.down('#numRecords').setText('Number of Records: ' + count);
});
}
}
You can try to add a paging toolbar and use the properties displayInfo & displayMsg.
Try this code :
bbar : {
xtype : 'pagingtoolbar',
displayInfo: true,
store:'your store',
displayMsg : 'Total rows {2}'// defaultvalue = 'Displaying {0} - {1} of {2}'
}
Assuming your store is loaded before the grid is rendered, this will probably work:
Ext.data.StoreManager.lookup("Users").getCount();
If the store loads dynamically, you will need to attach an event to the store's load event to update your grid, comment if the above code does not work and I can probably help you.
As it has already been said, you have to wait for the store to be loaded before using getCount. Except in the case you'd really use a memory store like the one in your example, but I doubt you'd want to display a dynamic number of record for that use case...
So, you have to listen for the load event of the store and update your text item then. The load event will fire each time the store is loaded, reloaded, etc., which may occur multiple times if your grid is paged or allow for filtering, etc. That means that our number of records will be kept in sync with the actual content of the store. Good.
Now, how to install that listener? One very common place for putting that kind of treatment is in the initComponent method of your component.
Here's the code. See the comments for a crash course in overriding initComponent (see another answer for a lecture on the topic).
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: '<center>ECRIS-MetaData Management</center>',
store: 'Users',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
// Give an itemId to this component to make it easy to
// reference later.
{ xtype: 'tbtext', text: 'Loading...', itemId: 'recordNumberItem' },
{ xtype: 'tbfill' },
{ text: 'Print' },
{ text: 'Export' }
]
}],
initComponent: function() {
// We're overriding an existing method, so that's very important to call
// the parent method, or the component will break in awful sufferings
this.callParent(arguments);
// I'm putting the code *after* callParent, so that the store is available
var store = this.getStore(),
// Using ComponentQuery to retrieve the text item
textItem = this.down('#recordNumberItem');
// Using `mon` instead of `on` for better memory management (the listener
// will be removed from the store automatically when the component is
// destroyed).
this.mon(store, 'load', function() {
// We're left with the easy part...
textItem.setText("Number of records: " + store.getCount());
});
}
// ...
});
I have a fully functional Sencha Touc 2.1.1 app bundled in Phonegap 2.5. In it, I have several lists that I use to spawn form panels for data entry and other sundry activities.
An example one is as follows (it happens on all my form panels that get opened via a list tap):
I have a list with an item template is rendered in this container:
Ext.define('EvaluateIt.view.Push', {
extend: 'Ext.Container',
fullscreen: true,
//requires: ['Ext.TitleBar'],
alias: 'widget.pushview',
config: {
layout: 'vbox',
layout: 'fit',
//id: 'pushview',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
itemId: 'loginButton',
text: 'Login',
iconCls: 'arrow_right',
iconMask: true
},
{
xtype: 'button',
itemId: 'logOutButton',
text: 'Logout',
iconCls: 'arrow_right',
iconMask: true
}
]
},
{
flex: 1,
xtype: 'pushList'
}
],
listeners: [{
delegate: '#logOutButton',
event: 'tap',
fn: 'onLogOutButtonTap'
}]
},
onLogOutButtonTap: function () {
this.fireEvent('onSignOffCommand');
}
});
The list is:
Ext.define('EvaluateIt.view.PushList', {
extend: 'Ext.dataview.List', //'Ext.tab.Panel',
alias : 'widget.pushList',
config: {
width: Ext.os.deviceType == 'Phone' ? null : 300,
height: Ext.os.deviceType == 'Phone' ? null : 500,
xtype: 'list',
store: 'SiteEvaluations', //getRange(0, 9),
itemTpl: [
'<div><strong>Address: {address}</strong></div> '
],
variableHeights: false
}
});
And the form that is opened on tapping an address rendered in the itemTpl is:
Ext.define('EvaluateIt.view.PushForm', {
extend: 'Ext.form.Panel',
alias : 'widget.pushForm',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
//width: 400,
//height: 330,
width: Ext.os.deviceType == 'Phone' ? screen.width : 350,
height: Ext.os.deviceType == 'Phone' ? screen.height : 500,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'textfield',
name: 'address',
readOnly: true
},
/*{
xtype: 'checkboxfield',
id: 'addImage',
label: 'Upload Image'
},*/
{
xtype: 'button',
itemId: 'save',
text: 'Push to server'
}
]
}
});
This is called as a ViewPort via the following method in my controller:
onSelectPush: function(view, index, target, record, event) {
console.log('Selected a SiteEvaluation from the list');
var pushForm = Ext.Viewport.down('pushForm');
if(!pushForm){
pushForm = Ext.widget('pushForm');
}
pushForm.setRecord(record);
pushForm.showBy(target);
console.log('Selected a Push from the list ' + index + ' ' + record.data.address);
}
This usually works as expected:
Open Push view
Tap on address in list
PushForm opens for user to do their thang.
However! Occasionally, when the user taps on the address, instead of the PushForm opening a black arrow shows up underneath the address in the list (see attached image)
.
It is unpredictable when this will happen, but it does. So far, its only happened on my Android device, not on an emulator or in a Web browser (I have not yet heard from any of my iOS users about this yet).
Note: The only way to get the app to function "normally" again is to either do a complete restart or a force close of the application.
Any ideas what is causing it? Grazie!!
I am basically making 2 horixzontal panel to split the screen for ipad.
I am trying to show list in left panel and a detail view in right panel but any how I am not getting the list.
below is the view which I am using:
Ext.define("Sencha.view.Main", {
extend: 'Ext.Container',
config: {
layout: 'hbox',
items: [
{
xtype: 'panel',
width: 300,
items: [
{
xtype: "list",
id:'contactlist',
store:'Items',
}
],
},
{
xtype: 'panel',
html: 'Message Detail view goes here ....'
}
]
}
});
Below is the store which I am using:
Ext.define('Sencha.store.Items', {
extend: 'Ext.data.Store',
config: {
model: 'Sencha.model.Item',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
},
{
text: 'Snacks',
}
]
}
}
});
i think you might be missing the flex config option in the list as stated in the sencha docs and the itemTpl
{
xtype: "list",
id:'contactlist',
flex: 1,
itemTpl: {text},
store:'Items',
}
docs:
"The flex of this item if this item item is inside a Ext.layout.HBox or Ext.layout.VBox layout."
also there is no storeId set for the store. storeId: 'Items',
I have an Ext.data.Store and a Ext.Panel with a list.
I add record dynamically with this command:
myStore.add({txt: r});
I would like to add a listener that when I click on a list record, it shows me the record data in a message box.
How can I do it?
Ext.data.store
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
Ext.Panel
listpanel = new Ext.Panel({
layout: 'fit', // important to make layout as 'fit'
items: [
{
xtype: 'titlebar',
id: 'myTitle',
docked: 'top',
title: 'Before Change title'
},
{
//Definition of the list
xtype: 'list',
itemTpl: '{txt}',
store: myStore,
}]
});
You need to use itemtap event of the Ext.List component.
E.g
....
....
xtype: 'list',
itemTpl: '{txt}',
store: myStore,
listeners : {
itemtap : function(item, num, record, ev) {
var myTxt = item.getStore().getAt(num).get('txt');
Ext.Msg.alert('Message','Tapped record : '+myTxt);
}
}
....
....
I want to place a panel below a list but it seems the panel is always over top of the list. I dont want to set a height on the list as it might have no records or 20 so the height varies.
I simply want my panel to show right below my list. Also note I have disabled scrolling.
Rad.views.testList = Ext.extend(Ext.List, {
fullscreen: true,
layout: 'hbox',
scroll: false,
align: 'top',
store: Rad.stores.test,
itemTpl: Rad.views.testTemplate(),
});
topPanel = new Ext.Panel({
fullscreen: true,
scroll: true,
layout: {
type: 'vbox',
pack: "start",
align: "start"
},
defaults: {
width: '100%',
},
items: [
{
layout: 'hbox',
items: [testList]
},
{
html: 'This will be on the list not below!'
]
});
Ext.apply(this, {
layout: {
type: 'vbox',
pack : 'top',
},
dockedItems: [titlebar],
items : [ topPanel]
});
I should have been using Panels with Data View.
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="photosLocation">{pic}{name}',
'</div>',
'</tpl>'
);
var panel = new Ext.Panel({
width:535,
autoHeight:true,
layout:'hbox',
title:'Simple DataView',
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ alert('click'); }
}
},
items: new Ext.DataView({
store: Rad.stores.deals,
tpl: tpl,
autoHeight:true,
itemSelector:'div.photosLocation',
})
});