I've a store and model to make AJAX Call and get the result.
Here is my View
Ext.define('kids.view.YouTube', {
extend: 'Ext.Component',
alias: 'widget.YouTubePlayer',
xtype: 'YouTube',
config: {
url: 'http://www.youtube.com/embed/',
videoId: 'qsvpvqvApKo',
vWidth: 420,
vHeight: '315',
styleHtmlContent: true,
aaa: '1',
},
initialize: function() {
var prod = Ext.create('kids.store.vids');
prod.load(function ( ){
prod.each(function (record, id){
tmp = tmp + record.get('vid_url');
});
});
this.callParent(arguments);
var out = Ext.String.format(
[
'<div align="center">',
'<iframe width="{0}" height="{1}" src="{2}"',
'frameborder="0" allowfullscreen></iframe>',
'</div>'
].join(''),
this.getVWidth(),
this.getVHeight(),
**tmp //(the dynamic variable i formed in onLoad event of store**
);
console.log(tmp);
this.setHtml(out);
}
});
I used prod=ext.create('kids.store.vids');
and i'm using onload function, which is fetching values correctly.
how can i use tmp variable out side of onload, becuase the variable is becoming empty. and inside the store.load(function) i can not use this.callParent()
h*ow can i pass dynamic html here, as per the store returned values?*
help me
Pavan
Got it thanks
i've used panel.setHtml to update the html from the variable which i got from store.
thanks
Related
I have a simple List inside a container that I would like to see refreshed with new items when it is activated.
In my controller, I have an event for this:
onActivate: function() {
var that = this;
var store = this.getApprovalRequestsStore();
store.getProxy().setUrl('http://mobile-approvals-services.example.com/'+ Global.approvalsListUri + Approvals.app.user);
store.load({
callback: function (records, model) {
debugger;
that.getApprovalsList().refresh();
}
});
},
And in my list, I have a tpl for the items that come back from the store (verified I have items coming back from store at break point above), yet no items are shown:
Ext.define('Approvals.view.approvals.List', {
extend: 'Ext.List',
xtype: 'approvalsList',
config: {
itemId: 'ApprovalsList',
store: 'ApprovalRequests',
itemHeight: 70,
variableHeights: false,
pressedDelay: 0,
emptyText: "<div>No Approvals Found</div>",
loadingText: "Loading...",
onItemDisclosure: false,
itemTpl: '<div class="listView">Request For: {requestedFor}</div>',...
Is there something flawed in my approach?
It was a problem with the reader. Once I set totalProperty and successProperty to values being returned from the service it worked. WTHO.
Below I have pasted a function to show the data in the datagrid based on the function call shownames('a'). DataGrid is not refreshing for different characters like shownames('b')...and so on . Or, How do I change the data in the datagrid without destroying the grid completely ?
function shownames(chr) {
require([
"dojox/grid/EnhancedGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/xhr",
"dojo/domReady!"
], function(DataGrid, Memory, ObjectStore, xhr){
var grid, dataStore;
xhr.get({
url: "http://localhost/xampp/namedb.php?name_idx="+chr,
handleAs: "json"
}).then(function(data){
dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
if(dijit.byId("namegrid")) {
grid.destroy();
} else {
grid = new dojox.grid.EnhancedGrid({
id: "namegrid",
store: dataStore,
query: { name_id: "*" },
queryOptions: {},
structure: [
{ name: "Name", field: "name", width: "25%" },
{ name: "Actual Meaning", field: "meaning", width: "50%" },
{ name: "name_id", field : "name_id", hidden: true }
]
}, "alphanames");
grid.startup();
}
/*
dojo.connect(grid, "onRowClick", grid, function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get the ID attr of the selected row
var value = this.store.getValue(item, "country_name");
});
*/
});
});
}
Thanks,
Raja
you should not refresh the grid the way you posted it !
First you need to initialize a grid at startup. So the grid shows you some data. Dont create a grid each time !!!! AFTER that your function has to communicate with the grid by using it's methods !
I constantly use this bulk to refresh the grid:
var grid= // CREATE GRID IN HERE
function yourFunction(id) {
var prepareQuery={};
prepareQuery["name_id"]=id; // Create a query based on id
grid._pending_requests={}; // Stop everything thats loading
grid._setQuery(prepareQuery); // Pass query to the grid
grid._refresh(true); // Refresh grid
}
It may also work with your code, but you may have to do some adaptions.
On the front-end I have a Calls grid. Each Call may have one or more Notes associated with it, so I want to add the ability to drill down into each Calls grid row and display related Notes.
On the back-end I am using Ruby on Rails, and the Calls controller returns a Calls json recordset, with nested Notes in each row. This is done using to_json(:include => blah), in case you're wondering.
So the question is: how do I add a sub-grid (or just a div) that gets displayed when a user double-clicks or expands a row in the parent grid? How do I bind nested Notes data to it?
I found some answers out there that got me part of the way where I needed to go. Thanks to those who helped me take it from there.
I'll jump straight into posting code, without much explanation. Just keep in mind that my json recordset has nested Notes records. On the client it means that each Calls record has a nested notesStore, which contains the related Notes. Also, I'm only displaying one Notes column - content - for simplicity.
Ext.define('MyApp.view.calls.Grid', {
alias: 'widget.callsgrid',
extend: 'Ext.grid.Panel',
...
initComponent: function(){
var me = this;
...
var config = {
...
listeners: {
afterrender: function (grid) {
me.getView().on('expandbody',
function (rowNode, record, expandbody) {
var targetId = 'CallsGridRow-' + record.get('id');
if (Ext.getCmp(targetId + "_grid") == null) {
var notesGrid = Ext.create('Ext.grid.Panel', {
forceFit: true,
renderTo: targetId,
id: targetId + "_grid",
store: record.notesStore,
columns: [
{ text: 'Note', dataIndex: 'content', flex: 0 }
]
});
rowNode.grid = notesGrid;
notesGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
notesGrid.fireEvent("bind", notesGrid, { id: record.get('id') });
}
});
}
},
...
};
Ext.apply(me, Ext.apply(me.initialConfig, config));
me.callParent(arguments);
},
plugins: [{
ptype: 'rowexpander',
pluginId: 'abc',
rowBodyTpl: [
'<div id="CallsGridRow-{id}" ></div>'
]
}]
});
I am working in sencha touch 1.1, specifically, using Ext.List. But instead of using a proxy to populate the Ext.List object, I need to load the data right straight from an array javascript variable like
var = [["1","Ángel Quezada"],["2","Christian Herrera"],["3","Francisco Quispe"]]
I don't have any trouble populating the Ext.List in the proxy way, first I declare le model, then the proxy and finally the List. According the next lines.
Ext.regModel('Cronograma', {
idProperty: 'nrocuota',
fields: [{name:'nrocuota', type: 'string'}]
});
Ext.regStore('CronogramaStore', {
model: 'Cronograma',
proxy: {
type :'ajax',
url: '/mSAS/cotizacion.do?method=generarCronograma',
reader: {type:'array'}
}
});
this.grdCronograma = new Ext.List({
id: 'notesList',
store: 'CronogramaStore',
emptyText: 'No existe resultado ',
itemTpl: '{nrocuota}',
listeners: {'render':function(thisComponent){}}
});
But right know I have another need. I need to populate the List from an Array Javascript Variable, not using the proxy, I mean
how can I use the
var varArray = [["1","Ángel Quezada"],["2","Christian Herrera"],["3","Francisco Quispe"]]
to populate the Ext.List, I guess there's a way using the Ext.data.Store and its load method. but I can't find it.
Here is dynamic way of doing it, without using static data.
Ext.regModel('Cronograma', {
idProperty: 'nrocuota',
fields: [{name:'nrocuota', type: 'string'}]
});
Ext.regStore('CronogramaStore', {
model: 'Cronograma'/*,
data : [
{ nrocuota : 'Ángel Quezada' },
{ nrocuota : 'Christian Herrera' },
{ nrocuota : 'Francisco Quispe' }] */ // Does not take array [[],[],[]] that was specified in problem statement
});
this.grdCronograma = new Ext.List({
id: 'notesList',
store: 'CronogramaStore',
emptyText: 'No existe resultado ',
itemTpl: '{nrocuota}',
listeners: {'render':function(thisComponent){}}
});
// Here is the dynamic method.
function addToList(data){
var len = data.length;
for(var i=0;i<len;i++){
var note = Ext.ModelMgr.create({
nrocuota: data[i][1], //grab only name from the array
}, 'Cronograma');
CronogramaStore.add(note);
CronogramaStore.sync();
}
}
//now just call the function
var data = [["1","Ángel Quezada"],["2","Christian Herrera"],["3","Francisco Quispe"]];
addToList(data);
Ext.regModel('Cronograma', {
idProperty: 'nrocuota',
fields: [{name:'nrocuota', type: 'string'}]
});
Ext.regStore('CronogramaStore', {
model: 'Cronograma',
data : [
{ nrocuota : 'Ángel Quezada' },
{ nrocuota : 'Christian Herrera' },
{ nrocuota : 'Francisco Quispe' }
]
});
this.grdCronograma = new Ext.List({
id: 'notesList',
store: 'CronogramaStore',
emptyText: 'No existe resultado ',
itemTpl: '{nrocuota}',
listeners: {'render':function(thisComponent){}}
});
update to use arrays instead of json object:
Ext.regModel('Cronograma', {
idProperty: 'id',
fields: [ 'id', 'nrocuota' ]
});
var data = [["1","Ángel Quezada"],["2","Christian Herrera"],["3","Francisco Quispe"]];
Ext.regStore('CronogramaStore', {
model: 'Cronograma',
data : data
});
this.grdCronograma = new Ext.List({
id: 'notesList',
store: 'CronogramaStore',
emptyText: 'No existe resultado ',
itemTpl: '{nrocuota}',
listeners: {'render':function(thisComponent){}}
});
or already indicated if you don't have data available at time of creation of store then use store.loadData(data); function
i haven't tested this code myself so if it's not working then please tell me
I am having some difficulty with XTemplates and using the MVC structure. I have went through a few of the tutorials and by themselves they make sense but when I try to apply them to what I am trying to accomplish it does not work that well.
First off, my app consists of TabBarMVC and several views. Some of the views will have 'sub views'. I have the app working from a 'layout' perspective. Tabs are tabbing and views can access subviews. Now the issue is sending data to subviews.
An example is my Bill page to Detail page. In the bill page a user can enter a total and number of people to split the bill against. My controller takes both parameters and divides them and stores them in a 'guests' object. My guests object will be an array of 1-x number of guest objects. (based on the number to split).
I then send that object to an update method in my sub view to update a XTemplate but that is not happening. I can alert the object, and view the data in debugger but I do not know how to update the Xtemplate.
Here is the controller code:
splitdetail: function(options)
{
if ( ! this.splitdetailView)
{
var totalBill = options.data['totalBill'];
var numGuests = options.data['splitBy'];
var totalPerGuest = totalBill / numGuests;
var guestObject = new Array();
var theGuest;
for (var i=0; i<numGuests; i++) {
theGuest = {amount: totalPerGuest}
guestObject.push(theGuest);
}
app.views.calculatorSplitDetail.updateWithRecord(guestObject);
this.splitdetailView = this.render({
xtype: 'CalculatorSplitDetail',
switchAnimation: { type: 'slide'}
});
}
this.application.viewport.setActiveItem(this.splitdetailView, 'slide');
},
and here is my split detail
var guestTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div class=" x-field guest-amount-row x-field-number x-label-align-left">',
'<div class="x-form-label" style="width: 30%; ">',
'<span>Total bill</span>',
'</div>',
'<div class="x-form-field-container">',
'<input type="number" name="totalGuestAmount" class="x-input-number" value="{amount}">',
'</div>',
'</div>',
'</tpl>'
);
app.views.CalculatorSplitDetail = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
Ext.apply(this, {
scroll: false,
items: [
guestTemplate,
]
});
app.views.CalculatorSplitDetail.superclass.initComponent.call(this);
},
styleHtmlContent: true,
baseCls: 'calculator-splitdetail-panel',
updateWithRecord: function(record) {
guestTemplate.apply(record);
alert(record[0].amount);
}
});
Ext.reg('CalculatorSplitDetail', app.views.CalculatorSplitDetail);
guestTemplate is just a template, not a control, so it can't refresh itself, but it can generate new html for you. So all you need to do is update your panel with newly generated html:
updateWithRecord: function(record) {
this.update(guestTemplate.apply(record));
alert(record[0].amount);
}