How can I right-align the contents of a ExtJS tbar? - javascript

I have a tbar inside a grid panel like this:
This is the code that produces it:
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
title: 'Testing',
tbar: ['Filters:', {
width: 100,
xtype: 'combo',
mode: 'local',
value: 'en',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Produkt',
name: 'language',
hiddenName: 'language',
displayField: 'name',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['name', 'value'],
data : [
{name : 'German', value: 'de'},
{name : 'English', value: 'en'},
{name : 'French', value: 'fr'}
]
})
}],
What do I need to change so that the dropbox is right-aligned instead of left-aligned?
Addendum
thanks #dogbane, that works perfectly, here's how I right aligned both text and dropdown:
tbar: [
{xtype: 'tbfill'},
'Filters:',
{
width: 100,
xtype: 'combo',
mode: 'local',
...

Try:
{xtype: 'tbfill'}, // or '->'
See the docs for Ext.Toolbar.Fill.

Related

Data is not loading in ExtJS 3.4

My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?
I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.
Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well

ExtJS : Date picker 'monthspinner' picker not working in Chrome

Date picker with monthspinner is not working in Chrome. But works perfectly fine in IE.
items: [{
xtype: 'combo',
queryMode: 'local',
triggerAction: 'all',
forceSelection: true,
emptyText: 'Date Range Type',
fieldLabel: 'RSP Topic Range',
editable: false,
hidden: false,
disabled: false,
name: 'dateTopicRangeType',
displayField: 'name',
valueField: 'value',
value: 'date_range',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data: [
{name : 'RSP Month', value:'rsp_month'},
]
})
},{
xtype: 'fieldset',
name: 'fs_topic_rsp_month',
filterGroup: 'topic_range',
hidden: true,
disabled: true,
items: [{
fieldLabel: 'Month',
anchor: '98%',
labelWidth: 120,
labelAlign: 'right',
editable: false,
allowBlank: false,
width: 320,
name: 'topic_rsp_month',
xtype: 'monthspinner',
value: Ext.Date.format(startDate,'M, Y')
}]
}]
IE is populating the initial value. But just shows mm/dd/yyyy in chrome.
I am getting this error in console.
Uncaught TypeError: Cannot read property 'getTime' of undefined
The specified value 'Apr, 2015' does not conform to the required format, 'yyyy-MM-dd'.
Thanks in advance.

Ext.grid.ColumnModel appers a blank

hi this is my code for extjs i have added some parameters but when i run the code the o/p appears blank
Ext.onReady(function(){
Ext.QuickTips.init();
PresidentsDataStore = new Ext.data.Store({
id: 'PresidentsDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
baseParams:{task: "LISTING"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'IDpresident', type: 'int', mapping: 'IDpresident'},
{name: 'FirstName', type: 'string', mapping: 'firstname'},
{name: 'LastName', type: 'string', mapping: 'lastname'},
{name: 'IDparty', type: 'int', mapping: 'IDparty'},
{name: 'PartyName', type: 'string', mapping: 'name'},
]),
sortInfo:{field: 'IDpresident', direction: "ASC"}
});
PresidentsColumnModel = new Ext.grid.ColumnModel(
[{
header: '#',
readOnly: true,
dataIndex: 'IDpresident',
width: 50,
hidden: false
},{
header: 'First Name',
dataIndex: 'FirstName',
width: 150,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})
},{
header: 'Last Name',
dataIndex: 'LastName',
width: 150,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'ID party',
readOnly: true,
dataIndex: 'IDparty',
width: 50,
hidden: true // we don't necessarily want to see this...
},{
header: 'Party',
dataIndex: 'PartyName',
width: 150,
readOnly: true
}]
);
PresidentsColumnModel.defaultSortable= true;
PresidentListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'PresidentListingEditorGrid',
store: PresidentsDataStore, // the datastore is defined here
cm: PresidentsColumnModel, // the columnmodel is defined here
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
});
PresidentListingWindow = new Ext.Window({
id: 'PresidentListingWindow',
title: 'The Presidents of the USA',
closable:true,
width:700,
height:350,
plain:true,
layout: 'fit',
items: PresidentListingEditorGrid // We'll just put the grid in for now...
});
PresidentsDataStore.load(); // Load the data
PresidentListingWindow.show(); // Display our window
});
and this is my database.php file with hard coded values.
<?php
$cust[0]['IDpresident']=10;
$cust[0]['FirstName']='vinod';
$cust[0]['LastName']='kachare';
$cust[0]['IDparty']=123;
$cust[0]['PartyName']='xyz';
echo json_encode($cust);
?>
can you please tell me that where is the problem in php file as o/p appears to be blank

EXT JS: How to load selected grid row into window?

User Form
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
dockedItems: [{
xtype:'toolbar',
dock: 'bottom',
items:[{
iconCls: 'icon-user-add',
text: 'Add',
scope: this,
itemId: 'addButton'
},{
iconCls: 'icon-reset',
itemId:'resetButton',
text: 'Reset',
scope: this
},{
iconCls: 'icon-save',
itemId: 'savebutton',
text: 'Save',
disabled: true,
scope: this
}]
}]
});
This is my grid which displays user input. On row double click a window launches but its empty. How do i display the information from the selected row in the grid in the window?
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
columns: [{
text: 'Name',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'name'
},{
text: 'Age',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'age'
},{
text: 'Phone Number',
sortable: false,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'phnumber'
}]
});
Thanks in advance!
you need to add refs to window objects
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
ref : '../name'
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false,
ref : '../age'
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false',
ref : '../phnumber'
}],
and set data to them when you show window.
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.name = record.get('name');
win.age = record.get('age');
win.prohne = record.get('phone');
win.show();
}
Add a form property to Grid as a reference to form, and also a showForm() function that when a user click on Add or dblClick on row's grid, you call it with id of selected row or null(when click add). showForm() checks the form reference, if it's null, create an instance of form and call this.form.loadFormData(id)
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
form:null,
showForm:function(id){
if(!form) this.form = new Patients.view.Form();
this.form.loadFormData(id);
},
//columns:....
and in form in loadFormData() you make a decision depend on id. if it is null create an instance of Model and load it, else retrieve record(with all your desire fields) and load it.
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
// docked items and else...
loadFormData:function(id){
var me = this.
if(!id){
var record = new Patients.model.User();
this.loadRecord(record);
}
else{
var record = Patients.model.User.load(id,{
callback:function(record){
me.loadRecord(record);
var win = Ext.view.Window({
items:[me],
});
win.show();
}
}
}
}
Ext.data.Model.load() is static method.
Finally you create a window and add the form to it and call show()

Extjs grid filter using store.filter

I am using this to output a query from a database which outputs my data as I expect.
We are now wanting to filter that data by passing the the 'color' column if we want.
<script type="text/javascript">
Ext.onReady(function(){
var events_ds = new Ext.data.JsonStore({
autoLoad: true,
autoDestroy: true,
url: '<% $base %>json/events/WWN.json',
storeId: 'events_ds',
idProperty: 'id',
fields: [ 'id', 'precedence', 'affectedWWN', 'eventType', 'color', 'CollectTime' ]
});
var event_grid = new Ext.grid.GridPanel({
title: 'Events',
ds: events_ds,
height: 300,
columns: [
{
header: "ID",
dataIndex: 'id',
},
{
header: "Priority",
dataIndex: 'precedence',
sortable: true
},
{
header: "affectedWWN",
dataIndex: 'affectedWWN',
width:150,
sortable: true
},
{
header: "eventType",
dataIndex: 'eventType',
width:300,
sortable: true
},
{
header: "color",
dataIndex: 'color',
sortable: true
},
{
header: "CollectTime",
dataIndex: 'CollectTime',
width:150,
sortable: true
}]
});
var main_panel = new Ext.Panel({
autoScroll: true,
renderTo: 'main_panel',
items: [event_grid]
});
});
</script>
I am new at this and what I am seeing is to use something similar to this:
store.filter("color", "yellow");
but the filtering doesn't work like I am expecting.
What am I missing?
var event_grid = new Ext.grid.GridPanel({
title: 'Events',
//ds: events_ds, ???
store: events_ds,

Categories