Steps to reproduce:
Open http://dev.sencha.com/deploy/ext-4.0.0/examples/restful/restful.html
Sort data by ID column
Add row
The row will be at top of grid but it can be at bottom
The question: how to sort dynamically added data?
The newly added row is added to the store, see store.insert() in the sample code:
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Person());
rowEditing.startEdit(0, 0);
}
}, '-', {
text: 'Delete',
iconCls: 'icon-delete',
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
Then it is 'edited' with real values and the store record is updated accordingly.
Maybe all you have to do is to call
store.sort('email', 'ASC');
But refreshing the grid view might be enough, since after all you already ask it to be sorted:
grid.getView().refresh();
Related
I'm using fullcalendar to display a month view which shows the time and title of events (and a popover showing the description when hovered). When I click the event, I show a listday view that shows all the events for that day. That all works fine and I have this working with this code:
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'dayGridMonth,listDay',
center: 'title',
end: 'prev,next'
},
initialView: 'dayGridMonth',
initialDate: '2023-01-12',
height: 'auto',
dayMaxEvents: 3,
moreLinkClick: 'listDay',
eventClick: function(info){
switchToListView(info)
},
eventColor: 'green',
views: {
listDay: {
displayEventEnd: true
}
},
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Meeting',
description: 'My Description',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
and in this code pen
I'd like to show the description text for the event in addition to the title in the listday view and I can't figure out how to do this. I don't know whether I need to use an event hook or what. I just can't make my way through the docs and examples to see what to do.
Appreciate any help.
I got this working with this use of eventDidMount.
eventDidMount: function(info) {
info.el.querySelector('.fc-list-event-title a').innerHTML += ` ${info.event.extendedProps.description}`
},
Frankly, it feels a little weird that I need to go into the depths of the rendered HTML to adjust the output instead of changing what is going INTO the generated HTML but I guess that's just how it works (??)
Thanks to #ADyson for the push in the right direction.
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I have grid having grouped columns.
Some of my code is as follows:
Ext.require([
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel'
...
]);
var filters = {
ftype: 'filters',
encode: false,
local: true
};
var grid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
selType: 'cellmodel',
store: store,
columns:[
{
header: "Column1"
dataIndex: 'Column1'
},{
header: "Column2",
columns : [{
header: "innerColumn1",
dataIndex: 'innerColumn1'
},{
header: "innerColumn2"
dataIndex: 'innerColumn2'
}]
},{
header: "Column3",
dataIndex: 'Column3'
}],
features: [filters]
...
Now, if I use grid.columnManager.getColumns() it returns following columns:
Column1
innerColumn1
innerColumn2
Column3
It is not returning Column2 which is a parentColumn/groupColumn of innerColumn1 & innerColumn2. Which method of Ext Js I should use to get Column2 as well in the columnList? I am using Ext Js 4.2. Any help will be appreciated.
grid.getColumnmanager().getColumns() does not provide parent column of grouped columns. Column manager is to deal with only leaf columns.
While iterating columns you can access isSubHeader property only available in child groped columns and after that through ownerCt property you can access parent column.
hope this helps.
One of the solution to get all the columns is to make use of Ext ComponentQuery. I have created this fiddle. Look into the developer console of after running this fiddle.
So simplest query to get all the columns is :
grid.query('gridcolumn:not([hidden])')// Open fiddle for full example
It will simply return all visible columns. You can change query according to your requirements.
For Example, to get only the Grouped Column, you can use this
grid.query('gridcolumn[isGroupHeader=true]')
Click here for more information about ComponentQuery.
i am have 2 forms, and in first form i am have button1:
Buttons[{
width: 350,
text: 'Book',
name:'button1'}]
on second form i am have button2, and when button click in second form, then button in first form disabled, before i am use id of button (id:'button1') and make this:
Ext.getCmp('button1').setDisabled(true);
but now i am remove ID and use name in components. But i am didn"t know how disable button1 by name!
Buttons don't have a name property - you should consult the documentation to see what configuration variables you have available to you. I'd instead assign it an itemId so you can make use of the up() and down() functions in order to easily find an item in the component hierarchy from an event handler.
Or if you want to find it directly you can use the following to lookup up the item:
{
text : 'Button',
itemId : 'buttonSelector'
}
var button = Ext.ComponentQuery.query('#buttonSelector');
if(button.length) button[0].disable();
Keep in mind that the ComponentQuery utility returns an array of items (even if you make your itemId unique). Here's a simple fiddle / demonstration.
In response to your comment, there may be confusion in regards to what the buttons config actually does - according to the docs it is shorthand for the following:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
... this creates an extra "step" in the hierarchy which you must account for in a query. For example, if your form had an itemId of formId you could try something like:
Ext.ComponentQuery.query('#formId toolbar #myButtonId')[0].disable();
I've updated your fiddle to demonstrate this.
I have just recently made a move from Adobe Flex to Sencha ExtJs.
I can't seem to find an equivalent of data binding in ExtJs where a form value depends on another form value.
e.g. I am creating an SMS window where i show the count of characters entered in a message field.
This is how i am doing in ExtJS. Also, the fiddle - http://jsfiddle.net/xxB4J/
Ext.create('Ext.window.Window',{
items: [
{
xtype: 'textarea',
fieldLabel: 'Message',
listeners: {
change: function() {
var countLabel = this.up('window').down('#lbCharacterCount');
countLabel.setText(this.getValue().length + '/160 Characters');
}
}
},
{
xtype: 'label',
itemId: 'lbCharacterCount',
text: '0/160 Characters'
}
]
}).show();
Now, in Flex this was as simple as doing
<mx:Text text="{message.text.length.toString()}/160 Characters}" />
So, just want to know if there is some sort of similar data binding in ExtJS? or the way i am doing is the only way of doing it?
Thank you
Maybe, you could use a textarea configuration:
Sencha:
maxLength and maxLengthText
or is the control field editable ?