I have a grid which contains a column named dateOfBirth
the type of this column is date
I have displayed this column in my web application but the data of dateOfBirth is displyed in this format for example
Wed, 10 Jun 2009 16:11:53 +0100
my goal is to display this date in this format : d/m/y
I try with this code :
var testGrid1 = Ext.create('Ext.grid.Panel', {
id:'testGrid1 ',
store: testGridStore,
collapsible:true,
columns: [
{text: 'test1', flex: 1, sortable: true, dataIndex: 'num_speech'},
{text: 'test2', flex: 1, sortable: true, dataIndex: 'dateOfBirth'}
],
columnLines: true,
anchor: '100%',
height: 250,
frame: true,
margin: '0 5 5 5',
});
as I have already said this code display the date of column in this format : Wed, 10 Jun 2009 16:11:53 +0100
to resolve this problem I try without success with
{text: 'test1', flex: 1, sortable: true, dataIndex: 'dateOfBirth',dateFormat: 'd/m/y'},
I have a model :
Ext.define('needUtilitesList', {
extend: 'Ext.data.Model',
fields: [
{name: 'dateOfBirth', type: 'date',dateFormat: 'd/m/y'},
{name: 'num_speech', type: 'string'}
]
});
but it dosen't display the correct result
You are missing "type: 'date'," so
{type:'date', flex: 1, sortable: true, dataIndex: 'dateOfBirth', dateFormat: 'd/m/y'}
If you have a model, you can also specify the type for your dateOfBirth property there as well so the framework knows to load it as a date.
Related
I have a table displaying search results with server side Pagination but when I click the columns, there is no sorting taking place and the server displays the results again for any of the column arrow clicks. Is there any way I can limit the pagination to take place only for the page arrows in the footer and then sorting to take place for the displayed results when i click the columns?
<q-table
dense
:title="Patient result"
:data="searchResultList"
:columns="columns"
:pagination="serverPagination"
row-key="name"
:no-data-label="noDataMessage"
:loading="loading"
#request="request"
>
data() {
return {
filter: '',
columns: [
{
name: 'patientId',
required: true,
label: 'patientId',
align: 'left',
field: row => row.patientId,
format: val => `${val}`,
sortable: true,
}
{
name: 'lastname', align: 'center', label: 'lastname', field: 'lastname', sortable: true,
},
{
name: 'firstname', align: 'center', label: 'firstname', field: 'firstname', sortable: true,
},
{
name: 'dob', align: 'center', label: 'dob', field: 'dob', sortable: true,
},
],
page: 1,
rowsInPage: 25,
};
computed: {
serverPagination() {
return {
sortBy: this.paginationObject.sortBy,
descending: this.paginationObject.descending,
page: this.paginationObject.page,
rowsNumber: this.patientSearchResults.count,
rowsPerPage: this.paginationObject.rowsPerPage,
};
paginationObject: {
sortBy: 'name',
descending: false,
page: 1,
rowsPerPage: 25,
methods: {
request(props) {
this.$store.dispatch('patientSearch/setPaginationObject', props);
},
Use sort-method. You can write a custom function where you can pass the rows(Not all but according to pagination i.e. if the selected page is 1 the rows will be 0-5 from your array. Here I'm guessing the default visible rows will be 5.)
Check out this API reference - https://quasar.dev/vue-components/table
In QTable API, you will find the details about this method.
So I'm using ExtJS 4.1. I have a viewport that contains two items. They are stacked correctly but I want to put some space between them. Margins don't seem to work.
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.onReady(function() {
Ext.QuickTips.init();
window.formPanel = Ext.widget({
bodyPadding: '5 5 0',
collapsible: false,
defaultType: 'textfield',
frame: true,
id: 'formPanel',
layout: 'form',
renderTo: '',
title: 'Spring Demo 3 (Lookup Transfer Request)',
url: contextPath + '/users/ajax',
width: 450,
xtype: 'form',
buttons: [{
text: 'Check Status',
scope: this,
handler: function() {
formPanel.getForm().submit({
success: function(res, req) {
}
});
}
}],
fieldDefaults: {
msgTarget: 'side',
labelWidth: 105
},
items: [{
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'Username',
name: 'username',
value: ''
}, {
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'TXID',
name: 'txid',
value: ''
}]
});
window.resultsPanel = Ext.widget({
items: [{
id: 'labMessage',
margin: '0 0 0 10',
text: 'Waiting....',
xtype: 'label'
}],
title: 'Results',
xtype: 'panel'
});
window.viewPort = Ext.widget({
items: [formPanel, resultsPanel],
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
margins: '10 10 10 10',
padding: '10 10 10 10',
renderTo: 'container',
xtype: 'viewport'
});
});
The Ext.layout.container.VBox layout has the padding and defaultMargins configs that will apply the respective styles to child components. I have no idea why the naming is inconsistent, but that's what the docs say.
Looking at your sample code, it looks like you're applying your margins to the wrong components. If you want spacing between your panels, put the margin/padding settings on the panels themselves instead of on their container.
window.resultsPanel = Ext.widget({
xtype: "panel",
title: "Results",
margin: "10 0 0 0", // Same as CSS ordering (top, right, bottom, left)
items: [{
xtype: "label",
id: "labMessage",
margin: "0 0 0 10",
text: "Waiting..."
}]
});
I'm new to Sencha Touch2 and I'm trying to start off my app by loading arbitrary data from a simple store before I go on to using a proxy. My view shows but the data is not populating. I've seen this question but nothing that has helped me solve. Any help and patience is appreciated. Thanks in adavance!
My Model
Ext.define('SenchaFirstApp.model.Distributors', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 't', type: 'string'},
{name: 'distr', type: 'string'},
{name: 'group', type: 'string'},
{name: 'site', type: 'string'},
{name: 'status', type: 'string'},
{name: 'actuve', type: 'string'},
{name: 'assigned', type: 'string'},
{name: 'state', type: 'string'},
{name: 'schedule', type: 'string'},
{name: 'finished', type: 'string'} ],
}
});
My View
var distrStore = Ext.create('SenchaFirstApp.store.DistributorStore');
Ext.define('SenchaFirstApp.view.DistributorView', {
extend: 'Ext.dataview.DataView',
requires: [distrStore, 'Ext.data.Store', 'Ext.dataview.List'],
model: 'SenchaFirstApp.model.Distributors',
xtype: 'mainlist',
fullscreen: true,
config:
{
fullscreen: true,
layout: 'fit',
border: 5,
title: 'Distributors',
html: 'My datalist',
autoLoad: true,
items:{
title: 'Setup',
xtype:'list',
store: distrStore,
fields: [
{
text: 'T',
width: 1,
sortable: false,
hideable: false,
dataIndex: 't'
},
{
text: 'Distributor',
width: 50,
sortable: false,
hideable: false,
dataIndex: 'distr'
},
{
text: 'Group',
width: 20,
sortable: false,
hideable: false,
dataIndex: 'group'
},
{
text: 'Site Name',
width: 20,
sortable: false,
hideable: false,
dataIndex: 't'
},
{
text: 'Status',
width: 5,
sortable: false,
hideable: false,
dataIndex: 'status'
},
{
text: 'Active',
width: 5,
sortable: false,
hideable: false,
dataIndex: 'active'
},
{
text: 'State',
width: 2,
sortable: false,
hideable: false,
dataIndex: 'state'
},
{
text: 'Scheduled',
width: 10,
sortable: false,
hideable: false,
dataIndex: 'schedule'
},
{
text: 'Finished',
width: 10,
sortable: false,
hideable: false,
dataIndex: 'finished'
}
]
}
}
});
distrStore.load();
My Store
Ext.define('SenchaFirstApp.store.DistributorStore', {
extend: 'Ext.data.Store',
requires: ['SenchaFirstApp.model.Distributors', 'Ext.dataview.DataView'],
config: {
// xtype: 'distrlist',
storeId: 'mainlist',
model: 'SenchaFirstApp.model.Distributors',
autoLoad: true,
data: [
{t: 'S', distr: 'Smart Systems', site: 'Smart Temps', status: "done", active: 'Yes', assigned: 'Me', state: 'IN', schedule: 'today', finished: 'today'},
{t: 'I', distr: 'People', site: 'This One', status: "done", active: 'Yes', assigned: 'You', state: 'NC', schedule: 'yesterday', finished: 'tomorrow'}
]}});
app.js
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'SenchaFirstApp',
stores: ['DistributorStore'],
models: ['Distributors'],
views: ['DistributorView'],
requires: ['SenchaFirstApp.view.DistributorView', 'Ext.dataview.DataView', 'SenchaFirstApp.model.Distributors', 'SenchaFirstApp.store.DistributorStore', 'Ext.dataview.List'],
launch: function() {
Ext.fly('appLoadingIndicator');
Ext.Viewport.add(Ext.create('SenchaFirstApp.view.DistributorView'));
}
});
You do not need to create an instance of your store:
var distrStore = Ext.create('SenchaFirstApp.store.DistributorStore');
Because when you define your store in your application...
Ext.application({
stores: ['DistributorStore'],
...
});
...it is automatically created for you. To get a reference of your store in your view, simply use a string with the name:
{
xtype: 'list',
store: 'DistributorStore',
...
}
Other notes
You also do not need to load it using .load() because you have set autoLoad to true in your store config.
Your view should extend Ext.Container, not Ext.dataview.DataView. DataView is used to show data (basically an abstract Ext.List. Because you have a list as an item, you can just put it inside a container.
You have set fullscreen: true on the class as well as in the config. You only need to put it inside the config - but it isn't really neccessary because you are creating and inserting your view into Ext.Viewport (in your app.js) which is already fullscreen.
You do not need fields config inside your list. You should use a itemTpl to create the template for each row.
i have designed an entry form as shown,
i need to have same space between test box and Middle name label.
My code is as follows,
var patientForm = new Ext.FormPanel({
layout: 'column',
columnWidth:1.5,
renderTo: "patientCreation",
frame: true,
autoScroll:true,
title: 'Create Patient',
bodyStyle: 'padding:9px',
width: 900,
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
},{
xtype: 'textfield',
fieldLabel: 'LastName',
name: 'lastName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
allowBlank:false
},
....
....
]
How to leave/increase space between text box and Middle name column?
If you know your number of columns, use column layout. Otherwise do this:
defaults: {
labelStyle: 'padding-left:10px;'
},
items: [...]
Add a defaults config to the container of the columns. All it's children will have the settings you define in defaults (docs). In this example there's just the margin setting (docs) in defaults that will be applied to each item/column.
Ext.create('Ext.panel.Panel', {
title: 'Column Layout - with default margins',
width: 350,
height: 250,
layout:'column',
defaults: {
margin: '0 15 0 0' //top right bottom left (clockwise) margins of each item/column
},
items: [{
title: 'Column 1',
columnWidth: 0.25
},{
title: 'Column 2',
columnWidth: 0.55
},{
title: 'Column 3',
columnWidth: 0.20
}],
renderTo: Ext.getBody()
});
The accepted solution works only with fields as columns. My solution works with any type of column.
PS: the column layout documentation is here.
I want to add an account Info section to my app, it would contain name and role of the current user
In my server side i can get those infos, but i dont know how to send them from server to my form and display them in a displayfield
The only way I know of dynamically populating data from sever is in grids using store.
How can i do this please?
my extjs code:
xtype: 'form',
border: false,
frame: true,
height: 100,
width: 400,
layout: 'column',
items: [
{ columnWidth: .5,
border: false,
frame: true,
height: 50,
defaults: { labelStyle: 'font-size:11px' },
items: [{
xtype: 'displayfield',
id: 'Customer',
fieldLabel: 'Customer',
value: '<span style="color:blue;font-size:9px">IBM</span>'
}]
}, {
columnWidth: .5,
border: false,
frame: true,
margin: '0 0 0 8',
height:50,
defaults: { labelStyle: 'font-size:11px' },
items: [
{
xtype: 'displayfield',
id: 'role',
fieldLabel: 'Role',
value: '<span style="color:blue;font-size:9px">Admin</span>'
}
]
Feel free to ask for more details if its not clear enough.
Thank you
Use form.loadRecord(record). Any fields whose name mathches your model fields will be set.
To get the record you can use MyModel.load() see the sencha guides for this http://docs.sencha.com/ext-js/4-0/#!/guide/data .