I am very new in Sencha Touch 2. I am trying to develop a simple screen with Tab Panel. In the panel, there will be three tabs- artist, albums and playlist. So when i will click the artist, it should show me the list of artist names. This artist name i am keeping in one store file. I wrote the code for view, store and model. But is it require to write the code code for container also? Because i am getting a empty list with 3 rows.
Here is senchafiddle link for my app: Sencha fiddle link
Please help me. As i am pretty new in Sencha Touch 2.
Thanks in advance.
Please note that Javascript is case-sensitive.
It seems that you want to name your field firstName. So take a look at your model definition and simply change it to:
Ext.define('MyApp.model.modelname', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'firstName' //it's 'firstname' before
}
]
}
});
Related
I am using a view which has some fields like:
items: [
{
xtype:'textareafield',
name: 'name_content'
}]
Now this view has been included in other multiple views(Multiple tabs).
I am setting the value in the field by using getForm().findField('name_content).setValue().
It is working if one tab call the view.But If two tabs are opened both calling the same view. Value is not being displayed for send one.
How should I do it.
You could try assigning an id to the text area and then using Ext.getCmp('id').
I've seen some ExtJS people say that there are better/more efficient ways than using "id" but you can at least make sure that works.
items: [
{
xtype:'textareafield',
name: 'name_content',
id: 'my_text_area_id',
}]
Then later
Ext.getCmp('my_text_area_id').getValue();
I want to make a grid data according to JSON response of a method means if i send JSON Array with 3 element its create column name three different name as well as 10 ,20 or more dynamically according to Array size.
Please help me or suggest me some example code.If its not feasible in extjs please suggest me to another
frame work .
Sorry for my poor english.
Thanks
Naresh
Extjs 3 solution
You can add metaData to the JSON response. Inside the metaData you can send a field-config. Listen to the metachange event and update you grid accordingly.
You can find an example here: Dynamic Grid (ExtJs 3)
Extjs 4+ solution
There is a user component Dynamic Grid Link
Ext.create('Ext.window.Window', {
width: 400,
height: 400,
title: 'Example of Dynamic Grid'
layout: 'fit',
items: [
{
// All what you have to set! :)
xtype: 'dynamicGrid',
url: '/some/url'
}
]
});
This should do exactly what you are looking for!
Hi i have an Extjs 4 form that i want to fill with a record of my store.
Here is the model:
Ext.define('Policy', {
extend: 'Ext.data.Model',
fields: [
{name:'policyName', type:'string'},
{name:'description', type:'string'},
{name:'agreement', type:'string'}
]
});
And here is the htmleditor field:
{
xtype: 'htmleditor',
fieldLabel : 'Agreement',
name: 'agreement'
}
When the form is shown i call to the loadRecord method in order to fill the fields. The name and description policy fields are correctly filled but the agreement field is not filled. This is the way i fill the fields:
var record = store.findRecord('policyName', policyName);
formPanel.getForm().setValues(record.data);
If i have the agreement field as a textfield it works ok, but i need an advanced view of this text because it is in html format. Does anybody know how to fill the htmleditor field?
Additionally... is it possible to view the html in raw mode on this field?
You could also do it this way and I know it works since I use it.
Ext.getCmp('formpanel').getForm().setValues(record.data);
Assuming you have one record you're trying to load and the name of the fields in the model match the name of the form fields.
I seem to be struggling with something I have used a million times! I dont understand why all of a sudden it doesnt work anymore :)
My Layout
an accordion
> toolbar
> tabs
>tab 1
> form.panel 1
> textfield (alias: 'widget.mytextfield')
> form.panel 2
>tab 2
> form.panel 1
Now heres the problem... when im at panel 1 and I try to access the textfield (mytextfield)
//panel, being 'tab 1 > panel 1'
var textfield = panel.down('mytextfield')
It just returns null.
My output for
console.info(panel.down());
is the header of the panel (so im def at the right location) -> it seems as if it cant find the body of the panel
Any ideas? Totally stuck!
The only way I get get 'mytextfield' is with
var textfield = panel.items.items[0];
But if the textfield changes order then the above code wouldnt work anymore of course
Thanks in advance!
UPDATE
Ok, I've figured something out... which is strange
If I take the textfield out of the panel and place it in a separate file. Then include it using requires. I can access the textfield with .down()
For example in my main form panel
...
requires:['App.view.MyTextField'],
items:[{
xtype:'mytextfield' //i can access you with .down()
},{
xtype:'textfield',
alias:'widget.mytextfield2' //you are showing up - but I CANT access you with .down() - only panel.items.items[0]
}]
...
MyTextField
Ext.define('App.view.MyTextField', {
extend:'Ext.form.field.Textfield',
alias:'widget.mytextfield'
});
Any ideas why?
How and where do you get your parent panel component?
http://jsfiddle.net/UBb8n/1/ — works for me.
UPDATED:
According to documentation:
alias:
List of short aliases for class names.
Most useful for defining xtypes for widgets.
So keep in mind that items: {xtype: 'blah'} != Ext.define('My.Class.Blah', {alias: 'widget.blah'}).
First it's just an instantiation of the second one.
And alias: 'widget.mycoolpanel' is just a shorthand for helper function Ext.widget that searches components with xtype: 'widget.<…>'.
I'm using Sencha Touch 1.1. I have a Ext.List and when the user selects an item, I switch to the details page using
rootPanel.setActiveItem('details');
That works fine. Now I want to get the details of the selected item and populate properties in the 'details' panel. How do I do that?
At the moment I'm passing the record around to the various panels of the details page by using this code:
onItemDisclosure: function (record) {
// user has selected a Country from the Country List.
// TODO: There must be a better way to pass the data around
CountryDetailsToolbar.setTitle(record.data.title);
var upperData = { upper: record.data.title.toUpperCase()};
CountryDetailsHeaderLeft.update(upperData);
CountryDetailsHeaderMonth.update(record.data);
viewport.setActiveItem('CountryDetailsCarousel');
}
This seems a bit messy to me. Is there a cleaner way to set titles and update panels with the data "record"?
you can use rootPanel.getActiveItem() to get instance of currently selected panel, i am not sure about what do you mean by populate properties in the details tab
Update:
i think there isn't any problem in passing record data between panels, i think that is the most efficient way
onItemDisclosure: function (record) {
// user has selected a Country from the Country List.
var title = record.get('title');
CountryDetailsToolbar.setTitle(title);
CountryDetailsHeaderLeft.update({ upper: title.toUpperCase() });
CountryDetailsHeaderMonth.update(record.data);
viewport.setActiveItem('CountryDetailsCarousel');
}