im new with Sencha Touch 2 and i have a problem working with drupal, json, etc...
It's simple but i can't take the solution.
I have a list who is completed by a json. This json comes from Drupal7 views in json format.
In my view i have something like that:
var listaArtistas = {
xtype: 'list',
title: 'Artistas',
height: 240,
store: {
autoLoad: true,
fields: ['node'],
proxy: {
type: 'ajax',
url: 'http://localhost/json-artistas',
reader: {
type: 'json',
rootProperty: 'nodes'
}
}
},
listeners: {
itemtap: function(lista,index,target,record,e,eOpts)
{
var artistDetail = new Ext.create('app.view.ArtistDetail');
panelHomeNav.push(artistDetail);
}
},
itemTpl: tpl
};
This code Works for me. And complete de list with the artist.
Now i click in the artist and goes to another view (artistDetail). But to show propertly this list with details of the artist, need the ID of the artist who i cliked before.
I need something like this in artistDetail.... url: 'http://localhost/json-artistasDetail'+NID, where the NID is the ID of the artist who is in the list before.
I don't know how to pass this parameters between 2 views in Sencha
Thanks for help... or read :D
Many options are possible, here is one: after creating the detail view, you could set a dedicated property, as an example:
var artistDetail = new Ext.create('app.view.ArtistDetail');
artistDetail.setArtistID(artistID);
panelHomeNav.push(artistDetail);
Related
I can't figure out why my data won't load to my AccordionList element from here:
https://github.com/kawanoshinobu/Ext.ux.AccordionList
I'm creating it within a panel like so:
{
xtype: 'accordionlist',
store: Ext.create('Rks.store.Bcks'),
flex: 1
},
It calls a store which is defined like so:
Ext.define('Rks.store.Bcks', {
extend: 'Ext.data.TreeStore',
requires: ['Rks.model.Bck'],
config: {
itemId: 'bks',
model: 'Rks.model.Bck',
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
url: 'path/to/ajax',
},
autoLoad: false,
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
}
}
}
});
When I call the view which contains the accordion, the console logs what appears to be a good object:
items: [{bck_id:3, author_id:1, title:test, items:[{c_id:2, bck_id:3, title:choice1, leaf:true}]}]
But nothing shows up. The panel is empty and no accordion items show.
However, when I replace the proxy with inline JSON, everything looks fine:
Ext.define('Rks.store.Bcks', {
extend: 'Ext.data.TreeStore',
requires: ['Rks.model.Bck'],
config: {
itemId: 'bks',
model: 'Rks.model.Bck',
defaultRootProperty: 'items',
root: {
items: [
{ bck_id: 1, author_id: 1, title: 'bck1', items: [ {c_id: 1, bck_id: 1, title: 'choice1', leaf: true} ] }
]
}
autoLoad: false,
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
}
}
}
});
Here the items show up in the accordion. I can't figure out why the second example works and the first doesn't. Is there something special I should be doing when calling the store proxy for Accordion?
UPDATE: I have managed to get the accordion list to display data, but when I change the url of the store and reload it, the store reloads but the accordion list does not update. The accordion list continues to display the data it receives from the first URL, not from reloads with modified URLS.
Thanks
I think I figured this out. For the accordionlist component, you need to do like so:
var accordionlist = Ext.ComponentQuery.query('rdb #rdb1')[0];
var brickstore = Ext.getStore('bcs');
bcs.removeAll();
bcs.getProxy().setUrl('newurl');
accordionlist.setStore(bcs);
accordionlist.load();
basically, manually remove all items, set the new url, set the store on the list, then load the list.
I think there was a problem with your proxy configuration. First, remove the defaultRootProperty config (which is out of proxy config), then try this:
proxy: {
type: 'ajax',
url: (your ajax url),
reader: {
type: 'json',
rootProperty: 'items'
}
},
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`m trying to write editable list with sencha touch,
I saw many examples but nothing did not work properly so I decided to build from scratch,
I have a list with items and on item tap my controller run the next code
showDetail: function (list, record) {
this.getMain().push({
xtype: 'vedit',
title: record.fullDetails(),
data: record.getData()
});
My "vEdit" screen is an form that should display the current tapped item data
This is the code for the edit form:
var form = Ext.define('TM.view.vEdit', {
extend: 'Ext.form.Panel',
xtype: 'vedit',
config: {
title: 'Edit task',
styleHtmlContent: true,
scrollable: 'vertical',
items: [
{
xtype: 'textfield',
name: 'title',
label: ''
},
{
xtype: 'textfield',
name: 'desc',
label: ''
}
]
}
});
I tried to load the data with the next code:
var ed = Ext.create('TM.model.mTasks', {
title: 'Ed',
desc: 'ed#sencha.com'
});
form.setRecord(ed);
and getting the next error:
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'setRecord'
NEED YOUR HELP,
Thanks!
Since you have not define a field named record in form's config, so you won't get setRecord() method.
To pass on data you may try doing this:
form.config.record = ed;
and in initialize function of view you can get it like:
var taskData = this.config.record;
var form = Ext.define('TM.view.vEdit', {
Man, you need to create new form(), because it's just a type definition.
I am using extjs4,I need to add check box group based on my JSON Object,
JSON
{"Provider":[{"id":3,"name":"Beta House","npi":0,"taxId":0,
"address":{
"state":{"id":"1","stateName":"Alabama","code":"AL"},
"zipcode":0,"country":"USA","email":"beta#gmail.com"},
"type":"CP","LabProvider":[],"ListOfProvider":[]}]}
ExtJs
Ext.define('providerList', {
extend: 'Ext.data.Model',
fields: ['id','name']
});
var provider = Ext.create('Ext.data.Store', {
model: 'providerList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/clinicalProvider/getAll',
reader: {
type: 'json',
root: 'Provider'
}
}
});
Panel
var checkboxconfigs = [];
provider.each(function(record) {
checkboxconfigs.push(
{
boxLabel: 'record.id',
name: 'record.name'
})
});
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Providers',
columns:2,
items:checkboxconfigs
});
var patientProvider = new Ext.FormPanel({
renderTo: "patientProvider",
frame: true,
title: 'Association',
bodyStyle: 'padding:5px',
width: 500,
items: [{
checkboxes
}],
});
There is no check box in the form.How to populate checkbox from JSON store
You can define the items array before you use it as children of checkboxes. Each element of items array is created base on each record of the store.
var items = [];
provider.each(function(record) { items.push({boxLabel: 'up-to-you', name: 'up-to-you'}) }, );
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Providers',
columns:2,
items:items
});
Here you can determine the boxLabel and name for each checkbox (the attributes of record may be used as prefix, suffix...)
A couple of tips:
in the definition of panel items remove {} around checkboxes, like this:
items: [ checkboxes ]
second, make sure that the store is available when you are populating checkboxes.
I have a similar situation in my app where store is available after panel is rendered. Panel is dynamically populated with list of checkboxes like this:
panel.add(new Ext.form.CheckboxGroup({
columns: 1,
vertical: true,
items: checkItems
}));
panel.doLayout();
EDIT: another tip:
remove qutoes '' from this code:
{
boxLabel: 'record.id',
name: 'record.name'
}
or you will end up with all labels 'record.id'
I have the following nested list (only on item in at present to make testing easier).
It works ok, but how can I display a normal page view that has html within it or loads the html page in.
var data = {text: 'Top List',
items: [{
text: 'List item',
items: [{text: 'Selected Page'}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'memory',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
displayField: 'text',
title: 'Theatres',
store: store
});
App.views.Pastcard = Ext.extend(Ext.Panel, {
title: "past",
iconCls: "add",
items: [nestedList]
});
Ext.reg('HomeAbout', App.views.Pastcard);
SO want the user selects the 'Selected Page' item it opens the the detailed view page and html information, preferably from an external source to limit the amount of code on one page.
EDIT
I think i can try and be a little clearer.
Below is my nested list.
var data = {text: 'My List',
items: [{
text: 'First List Item',
items: [{text: 'Sub list one'}, {text: 'Sub list Two'}]
},
{
text: 'Second List Item',
items: [{text: 'Sub list one'},{text: 'Sub list Two'}]
}
]
};
When me / the user clciks on the lsit and gets to the sublist then clicks on the list item called say "Sub list Two" then at the moment it opens to a blank page as there are no more lists, but instead I woudl liek to dispaly a normal page with details on, that can scroll and everything.
At the moment I dotn need to worry about loading in my json dynamiocally as I woudl liek to get a working model before I move on to that side of it
Thsi is not a phonegap app but a standard web app to be view online via mobiles.
* Edn of Edit **
Thanks
To use external source use a store with ajax proxy check this http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store.
To display HTML you can use just html: '<h1>Selected Page</h1>', styleHtmlContent:true,
instead of text:'Selected Page'
The best way is to load JSON objects from:
var myStore = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
then instead of html or text property use a template to display it:
tpl:[
'<h4>Email</h4>',
'<tpl for="emails">',
'<div class="field"><span class="label">{type}: </span>{value}</div>',
'</tpl>'
]
Check this tutorial http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/ and the API docs http://dev.sencha.com/deploy/touch/docs/ for more information.
Update
To the last items i.e. to the sub lists add this leaf: true then have add a handler fir onItemDisclosure to the list. You can get the record clicked as first argument passed to the event. Then you can use that object to display it on a different panel.
You can still use the tutorial above, just substitue the code where the contacts are fetched from the phone with some static data.
From that tutorial this is the part you need
app.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(app.views, {
contactsList: new app.views.ContactsList(),
contactDetail: new app.views.ContactDetail(),
contactForm: new app.views.ContactForm()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
app.views.contactsList,
app.views.contactDetail,
app.views.contactForm
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}});
This is the main panel where the list and the details panel are contained. You handle the onItemDisclosure event on the list, get the record that was clicked on, update the details panel with that data and the switch to that panel with
app.views.viewport.setActiveItem(
app.views.contactsList, options.animation
);