I am attempting to ref a grid that is in a region:
...
region: 'south',
layout: 'fit',
split: true,
items:[{
xtype: 'grid',
border: false
...
}]
...
in the refs section of my controller but I do not know how to reference the actual grid inside the region:
{ref: 'myGrid',selector:'????'}
Will someone please kick me in the right direction, please. Thank you.
refs are intended for views, not for components. The reason for that is that only one controller can ref a specific view. What you use as a selector is one of the alias for the view. So you'll have to create a view that extends Ext.panel.Panel and contains an Ext.grid.Panel or a view that extends Ext.grid.Panel. This view must have an alias on its own and that alias is what you use as your selector.
Instead of using a ref, I added an itemId to the grid component and can access it in the controller using Ext.ComponentQuery().
Related
Im trying to make a custom view and pass a value when I add it in another item using the xtype. It looks simple because I dont need to use stores or anything like that, its just static values but I cant achieve it :(
My idea is to place this in a component (the parent of my custom component):
...
items: [{
xtype: 'myNewComponent',
car: 'Renault'
}]
...
And then in my custom component get the value:
Ext.define('myNewComponent', {
extend: 'Ext.Panel',
xtype: 'myNewComponent',
config: {
items: [{
html: 'This is my car: ' + this.config.car
}]
}
});
I think that Im not understanding something, could you help me?
Thanks!
There are 2 things you need to do.
Firstly, you must create a the new config in your custom component. Doing this is as simple as adding it into the config object of your class:
Ext.define('myNewComponent', {
extend: 'Ext.Panel',
xtype: 'myNewComponent',
config: {
car: null
}
});
null here is merely the default value if you do not change it when you create the component.
Now we want to use this new config. What you have done will not work as the scope of this.config.car is the DOM window. You will need to create the item using a function of your class. You can achieve this by using the new updateCar method of your new car config. This method is called anytime you update that config. In your case, that is when you first create your custom component.
Ext.define('myNewComponent', {
...
updateCar: function(newCar) {
this.add({
html: 'This is my car: ' + newCar
});
}
});
You can find out more about how the config system works here: http://docs.sencha.com/touch/2-1/#!/guide/class_system
I am using sencha touch 2 and not getting help inside sencha forum, so I hope you guys can help me.
I want to create a list with custom items. In this custom item i want to have a horizontal scrollable listview with buttons as items.
I tried to do it component.DataItem but it does no work for me.
I tried also to add an custom xtype als an item in a list, but this does not work.
I think this is a simple task but sencha touch makes it a challenge for me.
So please help me and show me, how can I get a view like shown in this picture.
Instead of a standard list you are going to want to use Component DataView. Essentially, you are going to need to first define an Ext.dataview.component.DataItem, which is then implemented into the DataView. Below is a simple example of a buttons in a DataView as referenced from the DataView guide: http://docs.sencha.com/touch/2-0/#!/guide/dataview
First create the DataItem:
Ext.define('MyApp.view.DataItemButton', {
extend: 'Ext.dataview.component.DataItem',
requires: ['Ext.Button'],
xtype: 'dataitembutton',
config: {
nameButton: true,
dataMap: {
getNameButton: {
setText: 'name'
}
}
},
applyNameButton: function(config) {
return Ext.factory(config, Ext.Button, this.getNameButton());
},
updateNameButton: function(newNameButton, oldNameButton) {
if (oldNameButton) {
this.remove(oldNameButton);
}
if (newNameButton) {
this.add(newNameButton);
}
}
});
We must extend Ext.dataview.component.DataItem for each item. This is an abstract class which handles the record handling for each item.
Below the extend we require Ext.Button. This is simply because we are going to insert a button inside our item component.
We then specify the xtype for this item component.
Inside our config block we define nameButton. This is a custom configuration we add to this component which will be transformed into a button by the class system. We set it to true by default, but this could also be a configuration block. This configuration will automatically generate getters and setters for our nameButton.
Next we define the dataMap. The dataMap is a map between the data of a record and this view. The getNameButton is the getter for the instance you want to update; so in this case we want to get the nameButton configuration of this component. Then inside that block we give it the setter for that instance; in this case being setText and give it the field of the record we are passing. So, once this item component gets a record it will get the nameButton and then call setText with the name value of the record.
Then we define the apply method for our nameButton. The apply method uses Ext.factory to transform the configuration passed into an instance of Ext.Button. That instance is then returned, which will then cause updateNameButton to be called. The updateNameButton method simply removes the old nameButton instance if it exists, and adds the new nameButton instance if it exists.
Now create the DataView:
Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
useComponents: true,
defaultType: 'dataitembutton'
});
In your case, rather than using a button for the DataItem, you'll want to use a horizontal scrolling list. Here is an example that I found from this answer: Horizontal scrolling list
var list = Ext.create('Ext.DataView',{
store: store,
itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
inline: { wrap: false },
scrollable: {
direction: 'horizontal',
directionLock: true
}
});
Note that you will probably have to use components in the second dataview as well in order to achieve your buttons with image
How can i change a xtype in Sencha Architect?
Example:
from:
xtype: 'list'
to
xtype: 'RefreshableList'
As a disclaimer, I am one of the lead engineers on the Sencha Architect product.
Drag out a List as a top level component. All top level components are their own classes. Set the userAlias and userClassName configurations to values like 'refreshablelist' and 'RefreshableList'. Take a look at the code generated for this.
Drag out a Panel as a top level component, drag the existing RefreshableList in the inspector into the new Panel. A prompt will ask you if you would like to Move, Copy or Link the list, choose "Link". This will create an instance of your subclass RefreshableList.
This is currently the best way of going about this task inside of Architect. In the case that you built your RefreshableList component outside of Architect and would like to link it in the process will be a little different. You will have to create an override and change the xtype you are instantiating there. We are attempting to address this limitation in Sencha Architect 2.2. You will be able to specify what we are currently calling a createAlias. This is what alias (xtype, ptype, type, etc) to create.
For example if you dragged out a Panel and then put a list inside of it, you could then select the list in the inspector and configure the createAlias to 'RefreshableList'. This will replace the xtype in the generated code from 'list' to 'RefreshableList'. It will NOT change what is rendered on the canvas inside of Architect. You would have to load your RefreshableList class via a JS Resource and/or the dynamic loader/requires functionality.
You have to create your own class by extending the list class and give it your own widget alias. This tutorial has all you need: http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/
UPDATE
Here is some code for a very basic custom list
//this follows the MVC structure, if you wanted you could also do something like ux.RefreshableList
Ext.define('myAppName.view.RefreshableList', {
extend: 'Ext.dataview.List',
xtype: 'RefreshableList',
config: {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
},
initialize: function() {
this.callParent();
}
});
I want to create Master/Base view for my SenchaTouch2 application. It should have header, footer and content zone. Header and footer are static, but content should be declared in concrete view.
I can't find solution for my problem in sencha docs. Maybe it's a wrong way? Any link to sencha guides would be helpful.
for this type of functionality you can use navigation view or create any one view with card layout and put two item with docked top and bottom which you want to fix and third itam change as per you want.
You should create a view that extend from Container or Panel with 3 items. You decide which xtype (panel, container, toolbar, etc.) is your header and footer and you should use the card layout and dock at the top or button: docked : 'top'
Then you can use the 3rd element and update the view according to your needs and using the model and controller as you want.
Define a new Ext.Container class with header and footer containers. And then create new instances of it and insert the content view. Something like this:
Ext.define('App.view.BaseView', {
extend : 'Ext.Container',
xtype : 'masterview',
config : {
items : [{
xtype : 'container',
height : 100,
html : 'This is header',
styleHtmlContent : true,
// docked : 'top' //if needed
}, {
xtype : 'container',
height : 100,
html : 'This is footer',
styleHtmlContent : true,
// docked : 'bottom' //if needed
}]
}
});
And use it like this:
var panel = Ext.create('App.view.BaseView');
panel.insert(1, {
xtype : 'container',
html : 'This is concrete view'
});
This is the most basic example. You can tweak it the way you want.
I have this panel
Mobz.views.aPanel = new Ext.Panel({
id: 'apanel ',
tpl: aPanel _Template,
data: Mobz.stores.aPanel _Store
});
I'm trying to use it in two diferent panels, and I cannot. Sencha will treat only the last call\instantiation.
Example for instantiation
Mobz.views.IngressoTipo = new Ext.Container({
id: 'ingressostipo',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [Mobz.views.aPanel]
});
Can someone please help me to see how to reuse the same object, in multiple panels? I want to duplicate my code.
Thanks for any help!!!
Shlomi.
In order to reuse a panel as an item in multiple containers, you can add it add it dynamically and remove it after use with add() and remove() methods ie
yourParentPanel.add(childPanel);
yourParentPanel.remove(childPanel);