my application receives data from the database.
The "Recipes" contains Ext.NestedList.
http://www.senchafiddle.com/#VovtL#o7GJJ
I need to display a list inside detailed card:
http://www.senchafiddle.com/#4hKD8#uZlr7
The values in the list should be taken from the base and dependent upon the key values in nestedlist.
I looked Kitchen Sink Example, but there is little that I could understand. Is it possible to implement? or better to replace nestedlist with set of buttons?
I'll be glad to get any idea.
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
detailCard.removeAll(true, false);
detailCard.setHtml('');
detailCard.setLayout('fit');
var urList = Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
detailCard.add(urList);
}
the code is quite self explainatory. you just have to replace urList with your list. and change the store..
if any problem let me know
Related
We currently have a dgrid with a single column and rows like this:
Recently I added some code so that we can delete rows with the little X button that appears above the row when we hover them.
The handler calls this to delete the row:
this.grid.store.remove(rowId);
When we delete a row, since it's instantaneous and each row contains similar text, it's not always obvious to the user that something just happened.
I was wondering if it would be possible add some sort of dojo or css animation to the row deletion, like the deleted row fading or sliding out. This would make the row deletion more obvious.
Thanks
I have created a jsfiddle for animating(wipeOut) a selected row.
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},
{
name: 'xstyle',
location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
},
{
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
}
]
}, [
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dojo/store/Memory',
"dojo/fx",
'dojo/domReady!'
], function(declare, Grid, Selection, Memory,fx) {
var data = [
{ id: 1, name: 'Peter', age:24 },
{ id: 2, name: 'Paul', age: 30 },
{ id: 3, name: 'Mary', age:46 }
];
var store = new Memory({ data: data });
var options = {
columns: [
/*{ field: 'id', label: 'ID' },*/
{ field: 'name', label: 'Name' },
{ field: 'age', label: 'Age' }
],
store: store
};
var CustomGrid = declare([ Grid, Selection ]);
var grid = new CustomGrid(options, 'gridcontainer');
grid.on('dgrid-select', function (event) {
// Report the item from the selected row to the console.
console.log('Row selected: ', event.rows[0].data);
//WipeOut animation for selected row.
fx.wipeOut({ node: event.rows[0].element }).play();
});
});
Im trying to populate a custom component using a store (actually a store with local data) in a Sencha Touch 2 project.
My idea is to create one custom component for each element in the store, but actually nothing happens.
I have tried several things but anything works, could you help me? I have done an example to show the problem:
model:
Ext.define('project.model.city', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'country', type: 'string'},
{name: 'city', type: 'string'}
]
}
});
store:
Ext.define('project.store.cities', {
extend: 'Ext.data.Store',
requires: ['project.model.city'],
model: 'project.model.city',
autoLoad: true,
data: [
{ country: 'Germany', city: 'Berlin' },
{ country: 'Italy', city: 'Rome' }
]
});
View with store:
Ext.define('project.view.cityAll', {
extend: 'Ext.Panel',
xtype: 'cityAllView',
config: {
items:[{
xtype: 'cityItemView',
store: 'project.store.cities',
}]
}
});
Custom component View:
Ext.define('project.view.cityItem', {
extend: 'Ext.Panel',
xtype: 'cityItemView',
config: {
items: [{
itemTpl: '{city}'
}]
}
});
You need to assign store to cityItemView instead of cityAllView. cityItemView is having template specified and needs to be loaded with data.
Ext.define('project.view.cityItem', {
extend: 'Ext.Panel',
xtype: 'cityItemView',
config: {
items: [{
xtype:'list',
itemTpl: '{city}'
store:'project.store.cities'
}]
}
});
If you want to set data into panel, then you'd need to call setData(). A panel can not load data from store directly. You can use list view instead so show city, country pair. cityView no longer needed store property that way.
Give this a try.
You can add load listener in store which would loop through records and create as many panels:
listeners : {
load: function( me, records, successful, operation, eOpts ){
var plist = [];
var cv = Ext.Create('project.view.cityAll');
if(successful){
var data = records[i].getData();
for(var i=0; i<records.length; i++){
plist.push({
xtype : 'cityItemView',
data : data
});
}
cv.add(plist);
}
// Now add cv to viewport or wherever you want
}
}
You have to change cityItemView to use data whichever way you want. If you are using initialize method you can access it like this.config.data
I've noticed a problem with ST2 and selectfield pickers. I'm testing this on Desktop browser and tablet and both seem to show the same problem.
The problem seems to stem from having form data that is empty or uninitialised.
My example is a user logs into their account and needs to set their marital status. As this has never been set before the backing store model is actually 'null' for their marital status. When they click the picker, the pick for some reason picks the first item in the checklist automatically. This is evident by the check-mark on the right side of the item. The 2nd side-effect of this is, if you then select the first item, ST2 doesn't see this as an item change and so doesn't then propagate the selection change back to the form.
Is this is a bug? How do I get round this problem?
Ext.define('Gender', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Id', type: 'int'},
{name: 'ItemName', type: 'string'}
]
}
});
Ext.define('Details', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Gender', type: 'int'}
]
}
});
var myGenderStore = Ext.create('Ext.data.Store', {
model: 'Gender',
data : [
{Id: 1, ItemName: 'Male'},
{Id: 2, ItemName: 'Female'}
]
});
var myDetailsStore = Ext.create('Ext.data.Store', {
model: 'Details',
data : [
{ Gender: null }
]
});
var p = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender'
}
]
}
]
});
p.setRecord(myDetailsStore.getAt(0))
Ext.Viewport.setActiveItem(p);
// notice the picker has 'Male' selected even though the backing store for the Gender field is null
// also, we want to select Male from the list, but this isn't reflected on the form
// run below command in console window after selecting 'Male' even though it is selected and it shows null
// It only seems to like changes to the value as selecting female works. If then select Male from Female this also works.
p.getValues().Gender;
you can set value for the select field
p.down('selectfield[name=Gender]').setValue(myGenderStore.getAt(0).get('Id'))
see example: http://www.senchafiddle.com/#OuCtQ#GQJ2C
thanks
Just set the autoSelect config property to false,to prevent default selection like this:
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender',
autoSelect:false
}
I am following a senchaTouch tutorial. I have a Web service called HelloWorld.php, located in the URL http://mydomainTest.com/Proj/HelloWorld.php. It takes 3 values, name, email and description.
The web service uses POST method.
My code is as follows; What i want to know is that i haven't specified the Values for Keys (POST value Keys) and how will the web service know, what to save for the Keys (name,email, description)
When creating native iPhone apps, i use to say setPostValue: forKey: (in ASIHttpRequest), what i need to know is how to set the Key for the value passed in Sencha. I have attached my code below, please take a look and help me out.
Ext.define('GS.view.Contacts', {
extend:'Ext.form.Panel',
xtype:'contactform',
config:{
title:'Contact',
iconCls:'user',
url:'http://mydomainTest.com/Proj/HelloWorld.php',
items:[
{
xtype:'fieldset',
title: 'Contact Us',
instructions: '(email is not required)',
items: [
{
xtype:'textfield',
name: 'name',
label:'Name'
},
{
xtype:'emailfield',
name:'email',
label:'Email'
},
{
xtype:'textareafield',
name:'message',
label:'Message'
}
]
},
{
items:[
{
xtype:'button',
text: 'Submit',
ui:'confirm',
handler: function(){
this.up('contactform').submit();
}
}
]
}
]
}
} );
Follow the below steps :-
Get all the form values using var values = Ext.getCmp('contactForm').getValues() where contactForm is an id of this formpanel.
Make an Ext.Ajax request and pass the params property the value of values
Use a success handler to verify the success of request. Print the response text in the console log
Try this
Ext.define('GS.view.Contacts', {
extend:'Ext.form.Panel',
xtype:'contactform',
id:'contactForm',
config:{
title:'Contact',
iconCls:'user',
items:[
{
xtype:'fieldset',
title: 'Contact Us',
instructions: '(email is not required)',
items: [
{
xtype:'textfield',
name: 'name',
label:'Name'
},
{
xtype:'emailfield',
name:'email',
label:'Email'
},
{
xtype:'textareafield',
name:'message',
label:'Message'
}
]
},
{
items:[
{
xtype:'button',
text: 'Submit',
ui:'confirm',
handler: function(){
var values = Ext.getCmp('contactForm').getValues();
// prints the values filled in the form
// text fields of name, email and message.
console.log(values.name+","+values.email+","+values.message);
Ext.Ajax.request({
url: 'http://mydomainTest.com/Proj/HelloWorld.php',
params : values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
}
});
}
}
]
}
]
}
} );
I am using a grid panel in which I need to make a column as a link(It should look like link-with no action). I am using listener in the gridpanel and on click of a cell its working fine. Only thing is 1st column should look like a link. But how to put href="#" I am not sure. This is my code:
var addressDetailsStore = Ext.create('Ext.data.Store', {
id:'addressDetailsStore',
autoLoad: true,
fields:
[
'addressType',
'street1',
'street2',
'province',
'city',
'country'
],
proxy: {
type: 'ajax',
url: 'resources/json/addressDetails.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
}
}
});
Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
layout: 'fit',
collapsible: true,
title:'Address',
store: addressDetailsStore,
listeners:{
cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..
}
I just want 'addressType' columns appear like a link and I dont know where to put href...
Thanks for your responses.
-Praveen
You could also use a template column:
columns: [
{ text: 'External Link', xtype: 'templatecolumn', tpl: '{title}'}
]
You can specify the columns you want, and for the column with just a link, add a renderer. This example might help you.
var template = new Ext.XTemplate(
' ').compile();
columns:[
{
header: "",
renderer: function () {
return template.applyTemplate();
}
},
You can use renderer function like as follow
columns: [
{
header: 'number',
dataIndex: 'number',
flex: 1,
renderer: function(number) {
return Ext.String.format('{0}', number);
}
},