I am extending extjs Container component and making a custom component but when i am adding an item using add function it's giving an error that the add function doesn't exist for my custom component. How can this happen since add function is available for Container and my component is extending that. Here's the code
var row = Ext.define('TableRow',{
extend: 'Ext.container.Container',
layout: {
type: 'table',
columns: 10
}
});
row.add(); // This line is giving error saying add function is not available for row
Ext.define() is for defining a class. Once the class has been defined, it can be instantiated by calling Ext.create('TableRow');
Ext.define('TableRow',{
extend: 'Ext.container.Container',
layout: {
type: 'table',
columns: 10
}
});
var row = Ext.create('TableRow');
row.add();
Related
I'm using Sencha Touch 2.3. I'm trying to get a Store instance inside a controller in a similar way thats defined in this article http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/.
I've defined the 'Location' store in the Controller config. I then try to get the store using 2 methods that both fail. First through Ext.getStore and the second through getLocationStore which should be an autogenerated function. Both fail. The first call returns undefined and the second call throws an exception because the function is not available.
Ext.define('MyApp.controller.Location', {
extend: 'Ext.app.Controller',
config: {
refs: {
locationSearchField: '#locationSearchField'
},
control: {
locationSearchField: {
action: 'onSearchAction'
}
},
stores: [ 'Location' ]
},
onSearchAction: function() {
var locationSearchStore = Ext.getStore('Location');
if (locationSearchStore == undefined) {
Ext.Logger.warn('Could not locate locationSearchStore');
locationSearchStore = this.getLocationStore();
if (locationSearchStore == undefined)
Ext.Logger.warn('Could not location locationSearchStore again!');
else
Ext.Logger.info('Success!');
}
else
Ext.Logger.info('Success!');
}
});
You can get your store by: Ext.data.StoreManager.lookup('Location') (if it's called MyApp.store.Location).
To be sure, that you are in the right context in the onSearchAction, try to call console.dir(this); and check that this is the controller object itself
First of all, you want to access store in sencha touch but you have given link of extjs. Second, you need to define your store first and then add it in app.js file. And then you can access your store by Ext.getStore('Location') method. For reference you shold learn this http://miamicoder.com/2012/sencha-touch-2-stores-adding-removing-and-finding-records/
I try to use itemSelector in extjs4.2 but i don't know i can configure two store. The first multiselect panel is populate by a store, and the second had another too.
I need to save the variation in a DB because the stores that i use is ajax-proxy datastore.
This is my itemselector:
{
xtype: 'itemselector',
id:'itemselector',
name:'userRoles',
anchor:'100%',
store: dsRoles,
toStore: dsUserRoles,
valueField:'id',
displayField:'name',
/*here there is a problem*/
value: dsUserRoles,
msgTarget: 'side',
fromTitle : 'Available',
toTitle : 'Selected'
}
The value in the 'Selected field' is coming from a query and is not static like in the all the example i found.
EDIT: the toStore property doesn't work, and today this component make me crazy: when i load the window which contain a tabPanel which contain the itemselector for the secondTime this is what is render:
Whith Chrome i found this error Uncaught TypeError: Cannot read property 'internalId' of undefined
Any help is helpfull.
Problem has been resolved! I changed the source code!(ItemSelector.js)
here it is,
initComponent: function() {
var me = this;
me.ddGroup = me.id + '-dd';
me.callParent();
// bindStore must be called after the fromField has been created because
// it copies records from our configured Store into the fromField's Store
//me.bindStore(me.store); //don't need to bind
},
createList: function(title, store){ //add a parameter named store
...
store: store, //use the passed store
...
}
...
me.fromField = me.createList(me.fromTitle, me.store);
me.toField = me.createList(me.toTitle, me.toStore);
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
can somebody help me with how to extend extjs components using extjs version 4. I am looking for a proper syntax for the same. please help..!!
Following is an example code of extending textfield in ExtJS 4.
Other then using the existing configs and methods, this extended component also has a new config property created and a new method created & associated with an event.
The purpose of component is simple that it displays the label in red color if the value is mandatory, modifies the background color of the field if its readOnly and also changes the background color of the field when focussed.
The code is properly commented. Hope it helps.
Ext.define('Ext.pnc.Textfield', {
extend: 'Ext.form.field.Text',//Extending the TextField
alias: 'widget.pnctextfield',//Defining the xtype
config:{
focusCls:'focusClassFieldPnC',//Providing value for existing config property.
testConfig:'testConfigValue'//Creating a new config. Accessor functions will be created for this one by ExtJS engine
},
constructor:function(cnfg){
this.callParent(arguments);//Calling the parent class constructor
this.initConfig(cnfg);//Initializing the component
this.on('beforerender',this.beforeRender);//Associating a new defined method with an event
},
//Defining a method below and associating this with an event in the constructor above
beforeRender:function(){
if(!this.allowBlank){
this.labelStyle = 'color:#FF0000';
}
if(this.readOnly){
this.fieldCls = 'readOnlyClass';
}
},
//Over-riding a function which already exists in parent class. Note that this has not been associated with any event in constructor as it already defined in parent class
afterRender:function(){
console.log('after render function');
this.callParent();//Calling the parent class method. This can be omitted if not required and is not a must
}
});
.readOnlyClass{
background:#FF0000 !important
}
.focusClassFieldPnC{
background:#00ff00 !important
}
Ext.define('myApp.Grid', {
extend: 'Ext.Grid',
alias: 'widget.mygrid'
....
....
}
now you can use xtype:'mygrid'
Ext.define('BS.view.MyGrid' , {
extend: 'Ext.grid.Panel',
alias: 'widget.my-grid',
// Non-complex config types (booleans, integers, strings) go here
width: 1000,
autoHeight: true
initComponent: function() {
Ext.apply(this, {
// complex configs (objects / arrays) go here
columns: colModel,
});
this.callParent(arguments);
}
});
why not see the src of extjs4's components such as Grid,Table ...
and here are docs:
http://docs.sencha.com/ext-js/4-0/#/guide/components <== important
http://docs.sencha.com/ext-js/4-0/#/guide/class_system
Ext.define('My.custom.Component', {
extend: 'Ext.Component'
});