ExtJS XML Reader not loading data - extjs

My code is not showing any error, my php file is responding also(firebug reports that). But the grid is not showing any data. I was trying to get help from http://dev.sencha.com/deploy/ext-3.4.0/examples/feed-viewer/view.html but unable to understand it!. The idea is to provide a rss feed url to program, and it should fetch data from that url and then php file arranges it in a proper xml format just like the ExtJS example(from above link), upto this point, program is working fine, firebug says that response is an xml, but now, it not load.
Code:
var remoteProxy = new Ext.data.HttpProxy({
url : 'feed-proxy.php'
});
var store = new Ext.data.Store({
proxy : remoteProxy,
id : 'ourRemoteStore',
reader : new Ext.data.XmlReader({
record : 'item'
}, [{
name : 'title',
mapping : 'title'
}])
});
loadFeed = function(url) {
store.baseParams = {
feed : url
};
store.load();
console.log(store.getCount());
}
loadFeed('http://sports.yahoo.com/nba/rss.xml');
var mWIn = new Ext.Window({
title : 'My Window',
width : 500,
height : 400,
layout : 'fit',
items : [{
xtype : 'grid',
store : store,
id : 'myGrid',
loadMask : true,
columns : [{
id : 'title',
header : "Title",
dataIndex :'title',
sortable : true,
width : 420
}]
}]
}).show();
Ext.getCmp('myGrid').ownerCt.doLayout();
and php file code is :
<?php
// this is an example server-side proxy to load feeds
if(isset($_REQUEST['feed'])){
$feed = $_REQUEST['feed'];
if($feed != '' && strpos($feed, 'http') === 0){
header('Content-Type: text/xml');
$xml = file_get_contents($feed);
$xml = str_replace('<content:encoded>', '<content>', $xml);
$xml = str_replace('</content:encoded>', '</content>', $xml);
$xml = str_replace('</dc:creator>', '</author>', $xml);
echo str_replace('<dc:creator', '<author', $xml);
return;
}
}
?>

Related

Ext js combo box typehead crtl + v error

I have combo box and type head true. On change event I am making ajax request to get matched result.
If type there then its working fine, But If I do copy paste in the Combo then it shows result but gives and error and blocks further flow.
below is the code.
{
xtype : 'combo',
emptyText : 'Search',
id : 'search',
store : Store,
width : '50%',
minChars : 3,
typeAhead : true,
anchor : '100%',
listConfig : {
emptyText : 'No Matching results found.',
getInnerTpl: function() {
return '<div class="search">' +
'<span>{value} - {key}</span>'+
'</div>';
}
},
listeners : {
beforequery: function (record) {
// Added Condition to avoid weird JS error
if(Ext.getCmp('search').getValue() != null && Ext.getCmp('search').getValue().length <= 4){
return false;
}
},
select : function(combo, selection){
var selectedVal = selection[0].data.value;
Ext.getCmp('search').setValue( selectedVal );
},
change : function () {
if( Ext.getCmp('search').getValue() != null && Ext.getCmp('search').getValue().length > 4 ){
var searchEle = Ext.getCmp('search');
var searchType = Ext.getCmp('searchBy').getValue();
var searchText = '%';
searchText += searchEle.getValue();
Ext.Ajax.request({
loadMask : true,
url : URL,
method : 'GET',
params : {
searchText : searchText,
searchType : searchType,
},
scope : this,
success : function( response, callOptions ) {
var myTempData = Ext.decode( response.responseText );
Store.setProxy({
type : 'memory',
data : myTempData,
reader : {
type : 'json',
root : 'data',
totalProperty : 'total',
successProperty : 'success'
}
});
Store.load({
scope : this,
callback : function(records, operation, success) {
}
});
},
failure : function(response, options ) {
loadmask.hide();
Ext.Msg.alert( 'Error', genericErrorMsg );
}
});
}
}
}
The error is as below
The help is greatly appreciated. Thanks.
Json response
{"value":"Test , user # IB Tech: Strategic Change","key":"45804183"},
Finally I solved it.
There was some problem with store.
I bind it after ajax success and removed it from initial config and it got solved.
Store.load({
scope : this,
callback : function(records, operation, success) { }
});
Ext.getCmp('search').bindStore(Store);

Preselect items in EXT JS 4.2 Grid

I am trying to preselect items in my EXT grid based on the value of one of the items in the data store.
In my data store I fetch 7 items, the last item I grab 'installed' is a BOOLEAN and I would like to use that to preselect items in my grid.
Here is the code I have so far that is not working...
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.QuickTips.init();
var sb = $('#sb_id').val();
// Data store
var data = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
fields: [ 'name', 'market', 'expertise', 'id', 'isFull', 'isPrimary', 'installed'],
proxy: {
type: 'ajax',
url: '/opsLibrary/getLibraryJsonEdit',
extraParams: {
sb_id: sb
},
actionMethods: 'POST'
},
sorters: [{
property: 'market',
direction: 'ASC'
}, {
property: 'expertise',
direction: 'ASC'
}]
});
data.on('load',function(records){
Ext.each(records,function(record){
var recs = [];
Ext.each(record, function(item, index){
console.log(item.data);
if (item.data['installed'] == true) {
console.log('Hi!');
recs.push(index);
}
});
//data.getSelectionModel().selectRows(recs);
})
});
// Selection model
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'id'}
],
listeners: {
selectionchange: function(value, meta, record, row, rowIndex, colIndex){
var selectedRecords = grid4.getSelectionModel().getSelection();
var selectedParams = [];
// Clear input and reset vars
$('#selected-libraries').empty();
var record = null;
var isFull = null;
var isPrimary = null;
// Loop through selected records
for(var i = 0, len = selectedRecords.length; i < len; i++){
record = selectedRecords[i];
// Is full library checked?
isFull = record.get('isFull');
// Is this primary library?
isPrimary = record.get('isPrimary');
// Build data object
selectedParams.push({
id: record.getId(),
full: isFull,
primary: isPrimary
});
}
// JSON encode object and set hidden input
$('#selected-libraries').val(JSON.stringify(selectedParams));
}}
});
I was trying to use an on.load method once the store was populated to go back and preselect my items but am not having any luck.
Im a Python guy and don't get around JS too much so sorry for the noobness.
Any help would be appreciated.
Thanks again!
You should be able to do something like:
//create selModel instance above
data.on('load', function(st, recs) {
var installedRecords = Ext.Array.filter(recs, function(rec) {
return rec.get('installed');
});
//selModel instance
selModel.select(installedRecords);
});
Select can take an array of records.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select
//data.getSelectionModel().selectRows(recs);
Didn't work because store's don't have a reference to selection models it is the other way around. You can get a selection model from a grid by doing grid.getSelectionModel() or
you can just use the selModel instance you created
var selModel = Ext.create('Ext.selection.CheckboxModel', {

Ext Flot dynamically change chart values

I am using Ext flot for drawing charts on my application. I want to update chart data with ajax request or with a button. I couldn't update values. Anyone have an idea?
var graphDataArr = [{ label: 'My Graph', data: myDataArray, color: '#46F252', hoverable: false, clickable: false }];
new Ext.Window({
header : false,
layout : 'anchor',
height : 200,
width : 750,
baseCls : 'ext_panel_header_bar',
items : [ {
xtype : 'flot',
id : 'flotGraph',
cls : 'x-panel-body',
series : graphDataArr,
xaxis : {
min : xMin,
max : xMax
},
yaxis : {
min : yMin,
max : yMax
},
tooltip : false,
anchor : '98% 99%'
} ]
}).show();
Ext Flot API documentation says:
setData( Array Series ) : void
You can use this to reset the data used. Note that axis scaling, ticks, legend etc. will not be recomputed (use setupGrid() to do that). You'll probably want to call draw() afterwards.
You can use this function to speed up redrawing a plot if you know that the axes won't change. Put in the new data with setData(newdata) and call draw() afterwards, and you're good to go.
You could do the following in a button handler (where dataArray is your new data array):
var chart = Ext.getCmp('flotGraph');
chart.setData(dataArray);
chart.setupGrid();
chart.draw();
if you have send record from your web Application in Json/Proper format then you can simply create JavaScript that you can call on button /submit button.
function createCharts() {
var queryString = $('#mainForm').formSerialize();
var url_String = "runChartData.action" + '?'+queryString+'&selectedModule=Line';// URL to call ajax
$.ajax({
type: "post",
dataType: "json",
url: url_String,
async : true,
success: function(data){
chartData = data;
createChart(data); // the Method you have Created As I have created Bellow
}, error: function(data){
$('#chartDiv').empty(); //empty chart Div to recreate it.
}
});
}
createChart(var myDataArray){
$('#chartDiv').empty(); // reset to Create New Chart with new Data
var graphDataArr = [{ label: 'My Graph', data: myDataArray, color: '#46F252', hoverable: false, clickable: false }];
new Ext.Window({
header : false,
layout : 'anchor',
height : 200,
width : 750,
baseCls : 'ext_panel_header_bar',
items : [ {
xtype : 'flot',
id : 'flotGraph',
cls : 'x-panel-body',
series : graphDataArr,
xaxis : {
min : xMin,
max : xMax
},
yaxis : {
min : yMin,
max : yMax
},
tooltip : false,
anchor : '98% 99%'
} ]
}).show();
}

Sencha Touch Controller pushing a view

I'm trying to work out why when I push a view onto a Ext.Navigation.View control, the view I push renders, but the data I push with it doesn't. The view renders a very simple DataView control with some json data (name & surname).
It'll work if I create the view explicitly through "Ext.Create" (see commented out lines in controller), but I'm sure I've done this before where you can push "xtype" of the view and any relevant properties/data for the view. Am I right?
By the way, I've tested the json coming back from the form submission callback and everything is fine. It just seems to be the view doesn't want to render the data I send it as part of the "push". Here's my code. Am I missing something?:
View:
Ext.define('MyCo.Booking.view.PatientClinicSearchResults', {
extend : 'Ext.DataView',
xtype : 'DataViewPatientSearchResults',
itemTpl : '{Name}',
store : {
fields : ['Name'],
autoLoad : true
}
})
Controller :
Ext.define('MyCo.Booking.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
navViewClinics : 'NavViewClinics',
formPanelClinicPatientSearch : 'FormPanelClinicPatientSearch'
},
control: {
'NavViewClinics list' : {
itemtap : 'ClinicUserSearch'
},
'FormPanelClinicPatientSearch button' : {
tap : 'ClinicPatientSearchResults'
}
}
},
ClinicUserSearch : function(list, index, element, record) {
this.getNavViewClinics().push({ xtype : 'FormPanelClinicPatientSearch' });
},
ClinicPatientSearchResults : function(button, e) {
var form = this.getFormPanelClinicPatientSearch();
var navClinics = this.getNavViewClinics();
form.submit({
success : function(form, result) {
// var view = Ext.create('MyCo.Booking.view.PatientClinicSearchResults', {
// title : 'Search Results',
// fullscreen: true,
// store: {
// fields: ['Name'],
// data : result.items
// },
// itemTpl: '<div>{Name}</div>'
// });
// navClinics.push(view);
navClinics.push({ xtype : "DataViewPatientSearchResults",
title : 'Test',
store : {
data : result.items
}
});
}
});
}
});
JSON received from form submission callback:
{
"success" : true,
"items" : [
{
"Name": "Jon",
"Surname": "Doe"
},
{
"Name": "Karl",
"Surname": "Doe"
}
]
}
Any help would be appreciated. Thank you.
Problem solved. I removed the store declaration from the view and it worked. Just need to reference the data via the itemTpl property.

search field in a dataview in extjs

Am trying to put a search field with respect to a data view. There is a toolbar on top of the data view, which consists of a text field. On entering some text in the field, i want to call a search functionality. As of now, i have got hold of the listener to the text field, but the listener is called immediately after the user starts typing something in the text field.
But, what am trying to do is to start the search functionality only when the user has entered at least 3 characters in the text field.How could i do this?
Code below
View
var DownloadsPanel = {
xtype : 'panel',
border : false,
title : LANG.BTDOWNLOADS,
items : [{
xtype : 'toolbar',
border : true,
baseCls : 'subMenu',
cls : 'effect1',
dock : 'top',
height : 25,
items : [{
xtype : 'textfield',
name : 'SearchDownload',
itemId : 'SearchDownload',
enableKeyEvents : true,
fieldLabel : LANG.DOWNLOADSF3,
allowBlank : true,
minLength : 3
}],
{
xtype : 'dataview',
border : false,
cls : 'catalogue',
autoScroll : true,
emptyText : 'No links to display',
selModel : {
deselectOnContainerClick : false
},
store : DownloadsStore,
overItemCls : 'courseView-over',
itemSelector : 'div.x-item',
tpl : DownloadsTpl,
id : 'cataloguedownloads'
}]
Controller:
init : function() {
this.control({
// reference to the text field in the view
'#SearchDownload' :{
change: this.SearchDownloads
}
});
SearchDownloads : function(){
console.log('Search functionality')
}
UPDATE 1: i was able to get hold of the listener after three characters have been entered using the below code:
Controller
'#SearchDownload' :{
keyup : this.handleonChange,
},
handleonChange : function(textfield, e, eOpts){
if(textfield.getValue().length > 3){
console.log('Three');
}
}
any guidance or examples on how to perform the search in the store of the data view would be appreciated.
A proper way would be to subscribe yourself to the change event of the field and check if the new value has at least 3 chars before proceeding.
'#SearchDownload' :{ change: this.handleonChange }
// othoer code
handleonChange : function(textfield, newValue, oldValue, eOpts ){
if(newValue.length >= 3){
console.log('Three');
}
}
Btw. I recommend you to use lowercase and '-' separated names for id's. In your case
itemId : 'search-download'
Edit apply the filter
To apply the filter I would use filter I guess you now the field you want to filter on? Lets pretend store is a variable within your controller than you may replace the console.log() with
this.store.filter('YourFieldName', newValue);
Second param can also be a regex using the value like in the example
this.store.filter('YourFieldName', new RegExp("/\"+newValue+"$/") );
For sure you can also use a Function
this.store.filter({filterFn: function(rec) { return rec.get("YourFieldName") > 10; }});
Thanks you so much sra for your answers. Here is what i did, based on your comments
filterDownloads : function(val, filterWh){
if(filterWh == 1){
var store = Ext.getStore('CatalogueDownloads');
store.clearFilter();
store.filterBy(function (r){
var retval = false;
var rv = r.get('title');
var re = new RegExp((val), 'gi');
retval = re.test(rv);
if(!retval){
var rv = r.get('shortD');
var re = new RegExp((val), 'gi');
retval = re.test(rv);
}
if(retval){
return true;
}
return retval;
})
}
}
i think there is an example of exactly what you are trying to achive .. http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html

Resources