Tell me who knows how to make a json response of the desired format from two sql requests.
Base (client groups) #1 clients_groups has id_clients and name columns.
id_clients here are client IDs through whom from the clients database.
name is the name of the section.
Base (List of clients) No. 2 clients has data about users.
How to make json. Example as needed:
`
{
id: '',
text: 'Department №1',
children: [ // Here at the bottom you need to get a list of users by ID from department No. 1
{ id: 'User ID', text: 'Username' },
{ id: 'User ID', text: 'Username' }
]
},
{
id: '',
text: 'Department №2',
children: [ // Here at the bottom you need to get a list of users by ID from department No. 2
{ id: 'User ID', text: 'Username' },
{ id: 'User ID', text: 'Username' }
]
}
`
I tried to link data from an attachment through a loop. Nothing helped.
query("SELECT id, id_clients, name FROM clients_groups", (error, results) => {
console.log(results);
})
[
RowDataPacket { id: 1, id_clients: '2', name: 'Manager' },
RowDataPacket { id: 2, id_clients: '2, 3', name: 'Support' }
]
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();
});
});
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 new for sencha touch. I have a Listing page which using Ext.plugin.PullRefresh and Ext.plugin.ListPaging plugin to refresh my page, but I'm having an issue with duplicate items appearing after I pull to refresh.
Here is my coding
~View
Memberlist.js
Ext.define('bluebutton.view.BlueButton.MemberList', {
extend: 'Ext.List',
xtype: 'memberlistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh'
],
config: {
iconCls: 'team1',
title: 'Member List',
styleHtmlContent: true,
scrollable: 'vertical',
store : { xclass : 'bluebutton.store.BlueButton.MemberList'},
grouped: true,
indexBar: true,
limit: 5,
plugins: [
{ xclass: 'Ext.plugin.ListPaging',
autoPaging: true },
{ xclass: 'Ext.plugin.PullRefresh' }
],
id :'memberlist',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'selectfield',
name: 'gender',
cls: 'txtwhite',
options: [
{ text: 'Active Member', value: 'both' },
{ text: 'Delete Member', value: 'male' },
{ text: 'Suspended Member', value: 'female' }
]
},
{ xtype: 'spacer' },
{ xtype: 'searchfield' ,
itemId:'membersearch',
id :'membersearch'
}
]
}
],
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td rowspan="2" width="1%">',
' <img src="{imgUrl}" width="170" height="170" />',
'</td>',
'<td>',
' <div class="tweet">',
' <h2>{memberId}</h2>',
' <h3>Name: {name}</h3>',
' <h3>Age : {age}</h3>',
' <h3>Address : {address}</h3>',
' <h3>Point Avalaible : {pointAvalaible}</h3>',
' <h3>Last Visited : {lastVisited}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
~Store
Memberlist.js
Ext.define('bluebutton.store.BlueButton.MemberList', {
extend: 'Ext.data.Store',
config: {
grouper: {
groupFn: function (record) {
return record.get('name')[0];
}
},
fields: ['memberId', 'name','age' ,'imgUrl','address','lastVisited','pointAvalaible'],
pageSize: 5,
autoLoad: false,
storeId :'memberlist',
data: [{
memberId: 'Kenny',
name: 'Kenny Chow',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '20',
address:'The Business Centre , 61 Wellfield Road , Roath, Cardiff, CF24 3DG',
pointAvalaible :'10',
lastVisited: '26/11/2012, 11:52 AM',
}, {
memberId: 'Anthony',
name: 'Anthony Tan',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '21',
address:'3 Edgar Buildings , George Street , Bath , England , BA1 2FJ',
pointAvalaible :'44',
lastVisited: '27/11/2012, 09:52 AM'
},
{
memberId: 'Nicholas',
name: 'Nicholas Chen',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '22',
address: '91 Western Road , Brighton ,East Sussex ,England ,BN1 2NW ',
pointAvalaible :'30',
lastVisited: '30/11/2012, 15:52 PM'
},
{
memberId: 'Admin2',
name: 'Admin2',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '30',
address: '50 Eestern Road , Brighton ,West Sussex ,England ,BN1 34W ',
pointAvalaible :'120',
lastVisited: '01/12/2012, 15:52 PM'
},
{
memberId: 'User2',
name: 'User2',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '25',
address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
pointAvalaible :'32',
lastVisited: '30/11/2012, 18:52 PM'
}
]
}
});
Please help. Thanks
I also faced this problem. I override the refresh function in pullrefresh and added
refreshFn(){
Ext.getStore(storeid).load()
}
Currently, your store has no way of determining which records are new upon refresh. To fix this, you will need to create an Ext.data.Model instance with a defined idProperty that your store can use. Once, created, set your store's 'model' property to be the name of the model. Then, when your store refreshes, it will be able to see which records are actually new and only insert those.
Remove the 'fields' property in your store config and replace with this:
model: 'bluebutton.model.BlueButton.MemberList'
Model sample:
Ext.define('bluebutton.model.BlueButton.MemberList', {
extend: 'Ext.data.Model',
config: {
idProperty: 'memberId',
fields: ['memberId', 'name','age' ,'imgUrl','address','lastVisited','pointAvalaible']
}
}
I have the very same issue as you. This is a strange problem though since my application used to work, and one day, it started duplicating fields in the list using the pull to refresh plugin.
Adding the idProperty in the data store caused the refresh to fail in the onLatestFetched function on the Pull to Refresh plugin. My investigation seem to indicate that the faulty line was :
oldRecord = oldRecords.getByKey(newRecord.getId());
newRecord.getId() was always undefined, even though newRecord is correctly populated.
I solved my issue by patching this line in the following way:
oldRecord = oldRecords.getByKey(newRecord.internalId;);
This worked for me. Not really sure this is really future proof nor that it works in all situation but it can help you.
I have a numberfield like below
{
xtype: 'numberfield',
name: 'phoneNumber',
label: 'Phonenumber',
required: false
}
When a user inserts a value like 3832, it will be saved right but when the user sets a value with 0 at the begin of a sequence like 0123, the zero will be removed and only 123 will be saved.
In my case I want to store some phonenumbers which have a 0 value at the begin.
PS. the phoneNumber in the model is a string, so it will be saved as a string
{ name: 'phoneNumber', type: 'string' }
How could I resolve this?
Thanks in advance.
You should using a textfield and in controller to checking Ext.isNumeric(phoneNumberValue)
I have worked on your problem. Use your model like this. Also use textfield instead of a numberfield.
{
xtype: 'textfield',
name: 'phoneNumber',
label: 'Phonenumber',
required: false
}
mymodel.js
Ext.define("Stackoverflow.model.mymodel", {
extend: "Ext.data.Model",
config: {
fields: [
{ name: 'phoneNumber', type: 'string' },
],
validations: [
{ type: 'presence', field: 'phoneNumber', message: 'Enter a Phone number.' },
{ type: 'format', field: 'phoneNumber', matcher: /[0-9]{1,20}/}
]
}
});
And then validate this inside your controller. I hope you have code for model validation.( If not leave a comment)