I'm using Sencha 2.2.0 and i`m trying to populate a list component from a XML which came from a RSS url.
Example: http://www.bmfbovespa.com.br/NoticiasHome/rss.aspx?idioma=pt-br&ano=2012
So, i created the view News.js:
Ext.define('Investidor.view.News', {
extend: 'Ext.navigation.View',
xtype: 'news',
requires: [
'Ext.data.reader.Xml',
'Ext.dataview.List'
],
config: {
title: 'NotÃcias',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: 'News'
}
}
});
Which uses the store News.js:
Ext.define('Investidor.store.News', {
extend: 'Ext.data.Store',
config: {
model: 'Investidor.model.NewsItem',
proxy: {
type: 'ajax',
url: 'http://www.bmfbovespa.com.br/NoticiasHome/rss.aspx?idioma=pt-br&ano=2012',
reader: {
type: 'xml',
record: 'item',
rootProperty: 'channel'
...
Which uses the model NewsItem.js:
Ext.define('Investidor.model.NewsItem', {
extend: 'Ext.data.Model',
config: {
fields: ['title', 'description', 'link', 'pubDate']
}
});
The thing is: The page come in blank, and i don't see the browser trying to do an GET request (i'm seeing on chrome develop tool). So i think that the sencha touch isn`t consuming the URL. What am i doing wrong here?
Related
In my extjs project when I have this store loaded... which populates a combobox, the combobox is not displaying the results in sort order. Can someone see what I am doing wrong?
Ext.define('ExtApplication4.model.ClientListModel', {
extend: 'ExtApplication4.model.Base',
requires: ['ExtApplication4.model.Base'],
fields: [
{ name: 'clientName' },
{ name: 'ClientShortCode' }
],
sorters: [
{
property: 'clientName',
direction: 'ASC'
}
],
sortRoot: 'clientName',
sortOnLoad: true,
proxy: {
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'data'
}
You are defining sorters on your model. You should define sorters on your store.
Be careful of the remoteSort property. It defines if the store is sorted locally (on client) or remotely (on server).
Also, you shouldn't need to require extended classes.
I want to add a combobox in my app with a remote store. I have a store that call a php script that returns data in json format and I linked it with my combobox.
The store is autoLoaded but my combobox is still empty.
Here's my store
// Define autocomplete model
Ext.define('modelloAC', {
extend: 'Ext.data.Model',
fields: [
{ name: 'telaio' }
]
});
// store auto complete
var autoCompleteStore = Ext.create('Ext.data.Store', {
model: modelloAC,
autoLoad: true,
proxy: {
type: 'ajax',
url: 'script/request.php?operazione=gettelai',
reader: {
type: 'json',
root: 'telai',
totalProperty: 'results'
}
}
});
My PHP return a JSON array:
{"results":207,"telai":[{"telaio":"ZAR93200001271042"},{"telaio":"ZLA84000001738127"},{"telaio":"VF3WC9HXC33751301"},{"telaio":"W0L0AHL3555247737"}]}
My combobox:
xtype: 'combo',
name: 'telaio',
//hideTrigger: true,
store: autoCompleteStore,
typeAhead: true,
queryMode: 'remote',
fieldLabel: 'Telaio'
My store loads perfectly but my combobox is empty, where's the problem?
Need to add displayField and valueField in combo config:
...
displayField: 'telaio',
valueField: 'telaio',
...
Also model in your store is undefined now. Write it as a string:
...
model: 'modelloAC',
...
I have a grid which uses a remote store and remote pagination because I have too many records.The store for the main grid is:
Ext.define('ArD.store.RecordsListStore', {
extend: 'Ext.data.Store',
model: 'ArD.model.RecordsListModel',
autoLoad: true,
autoSync: true,
remoteSort: true,
remoteFilter: true,
pageSize: 15,
proxy: {
type: 'ajax',
actionMethods: 'POST',
api: {
read: g_settings.baseUrl + 'index.php/recordslist/getAll',
destroy: g_settings.baseUrl + 'index.php/recordslist/deleteRecord'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount',
successProperty: 'success'
},
writer: {
root: 'data',
writeAllFields: true,
encode: true
}
}
});
then I populate my grid and and it's all fine. But the problem is that I have a combobox which looks like this:
{
xtype: 'combo',
id: 'records_list_form_id',
emptyText: 'Choose Form',
editable: false,
store: 'FilterRecordsByForm',
displayField: 'title',
valueField: 'id',
lastQuery: '',
triggerAction: 'all',
queryMode: 'remote',
typeAhead: false,
width: 200,
listeners: {
select: this._filterRecords
}
}
And when I select something from the combobox there's the function :
_filterRecords: function()
{
var recStore = Ext.getStore('RecordsListStore');
var a = Ext.getCmp('records_list_form_id').getValue( );
var rec = Ext.getStore('FilterRecordsByForm').getAt(a);
console.log(recStore);
},
mostly just trying some things but I can get the ID of the selected element from the combobox and that is where I am.
What I need is having the id to make a new query usign my AJAX api (PHP/SQL backend) and populate the grid with the info related with this id. In my case I have 1:M relations so when I pass the Id i expect M records which I want to render on the place of the old grid.
Thanks
Leron
Use filter() method. Provide information that you need to filter by and store object will automatically request updated info from the server (you already have remoteFilter configured).
Look at Ext.Ajax() to make an on-demand ajax call to the server-side to load up your data and then use Store.loadData() or something like that to re-populate the Grid.
The new release of ExtJS can make your chrome unstable (Or is it my code?)! Let me explain my situation.
I am working on the new MVC architecture of ExtJS 4.0. I have a tree panel displaying my applications menu or navigation. As per the architecture, I tried to split my tree panel into controller, view and a separate store.
Here is my view:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: 'MainMenu',
rootVisible: false
});
this.callParent(arguments);
}
});
My tree's store:
Ext.define('CRM.store.MainMenu', {
extend: 'Ext.data.TreeStore',
constructor: function() {
console.log('Constructor of MainMenu TreeStore');
config = Ext.apply(this,{
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
});
this.callParent(arguments);
}
});
And in my controller I have provided my store info as well. Here is part of my controller config:
Ext.define('CRM.controller.MainMenu',{
extend: 'Ext.app.Controller',
stores: ['MainMenu'],
refs: [
{ref:'menu',selector: 'menutree'},
{ref:'cp',selector: 'centerpane'}
],
.
.
.
On initial execution, I get the following error:
Object MainMenu has no method
'getRootNode'
But now, I get more weird error:
Notice that chrome stops execution in the constructor of the tree store.
At the same time, in firefox:
Firefox executes better, but there is no application rendered!
After some trail and error.. I did find a way to get my application running.. and that is to avoid using my store and directly provide the store information as shown below:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: {
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
},
rootVisible: false
});
this.callParent(arguments);
}
});
Now the application executes with no issues at all!
Did anybody try creating tree panel using MVC architecture? I have no clue into how to fix this!
Looks like this is a known problem!!! Quoting from the ExtJS forums:
The parent class of "Ext.tree.Panel"
looks for the store in the store
manager in the "initComponent" method,
but "Ext.tree.Panel" tries to use it
before.
So, One way would be to code your store into your tree another way is to reassign the store in initComponent method. Here is the code:
initComponent: function(){
this.store = Ext.data.StoreManager.lookup(this.store);
this.callParent(arguments);
}
I need to dynamically populate a form from fields in a database using EXT JS forms and ASP.NET MVC and I'm having trouble finding a starting point.
The database includes all of the settings: the field names, the field data types and the original field data. When a menu is clicked on the application's main page, the clicked item's settings should appear on a separate form. The data types include checkboxes, textfields, and possibly combo boxes.
I can easily return all of the settings in Json, but I know the form will need to iterate either with Ext.each or some other method, but I'm having trouble getting my head around this. I've also thought about using an Ext reusable type as a template that accepts Json data from the database to determine the field name, type and content.
something like this:
TextSettings = Ext.extend(Ext.Container, {
layout: 'column',
autoHeight: true,
autoWidth: true,
initComponent: function() {
this.items = [
{
xtype: 'container',
style: 'float:left;clear:left;',
items: [
{
xtype: 'label',
text: 'Setting Name',
style: 'display:block;',
ref: '../../../NameLabel'
},
{
xtype: 'label',
text: 'Setting description',
style: 'display:block;font-style:italic;',
ref: '../../../DescriptionLabel'
}
]
},
{
xtype: 'container',
style: 'float:right;clear:right;',
items: [
{
xtype: 'textfield',
width: 300,
ref: '../../../SettingEdit'
}
]
}
];
TextSettings.superclass.initComponent.call(this);
}
});
Does this look like a crash course?
Has anyone else done something similar?
I ran across this Ajax function online (probably the Sencha forums) and it seems to be working.
var ajax = Ext.Ajax.request({
url: '/Controller/Items',
method: 'get',
success: function (response) {
response = Ext.util.JSON.decode(response.responseText);
//form.add(Ext.decode(response.responseText).data);
for (i = 0; i < response.data.length; i++) {
form.add({
xtype: response.data[i].xtype,
fieldLabel: response.data[i].text,
name: response.data[i].name,
value: response.data[i].value,
style: response.data[i].style,
items: response.data[i].items,
width: response.data[i].width
});
}
form.doLayout();
}
});
With the following Json output:
{success: true, data: [{xtype: 'label', text: 'Report', style: 'display:block', ref: '../../../Displaylabel' },{xtype: 'label', text: \"Report Text\", style: 'display:block;font-style:italic;', ref: '../../../DescriptionLabel'},{xtype: \"textfield\", width: 300, ref: \"../../../SettingEdit\", value: \"A comment... for YOU!!!\"}, {xtype: 'checkbox', text: 'Check it for fun'}]}
Still more work to go, but this is at least giving me dynamic text fields.