i try to use sencha cmd to create a project. But when using rowediting plugin, i got error
"SCRIPT5007: Unable to get property 'getAttribute' of undefined or
null reference"
whenever i scroll up/down over the editor on the grid.
Could you let me know what wrong here?
please click here to see more detail
Here my code look like:
Ext.define("Sample.view.common.HelloWorld",{
extend: "Ext.grid.Panel",
alias: 'widget.app-helloworld',
requires: [
'Ext.grid.plugin.RowEditing',
'PCS.config.Locale'
],
bind: '{hellostore}',
layout: {type: 'fit', align: 'stretch'},
initComponent: function() {
Ext.apply(this, {
plugins: [{
ptype: 'rowediting',
clicksToEdit: 2,
pluginId: 'helloeditor',
errorsText: 'Warning',
listeners: {
cancelEdit: 'onCancelEdit',
validateedit: 'onValidateEdit',
edit: 'onEdit'
}
}],
columns: [
new Ext.grid.RowNumberer({
width: 30,
align: 'center'
}), {
header: this.lblSysNm,
dataIndex: 'sysCd',
width: 150,
align: 'center',
itemId: 'colSystem',
renderer: function(value, metaData){
return metaData.record.data.sysNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{systemCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblDept,
dataIndex: 'deptCd',
width: 180,
align: 'center',
itemId: 'colDept',
renderer: function(value, metaData){
return metaData.record.data.deptNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{deptCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblCountryCd,
dataIndex: 'cntyCd',
width: 120,
align: 'center',
itemId: 'colCountryCd',
editor: {
xtype: 'textfield',
maxLength : 2,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
fieldStyle: 'text-align: center;text-transform:uppercase',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblCountryNm,
dataIndex: 'cntyNm',
width: 170,
align: 'left',
itemId: 'colCountryNm',
editor: {
xtype: 'textfield',
maxLength : 50,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblReason,
dataIndex: 'reason',
width: 340,
align: 'left',
itemId: 'colReason',
editor: {
xtype: 'textfield',
maxLength : 200,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important'
}
}, {
header: this.lblLastUpd,
dataIndex: 'updUserId',
width: 100,
align: 'center',
itemId: 'colLastUpd',
editable: false
}, {
header: this.lblLastUpdDt,
dataIndex: 'updDt',
xtype: 'datecolumn',
format: 'Y-m-d H:i',
width: 150,
align: 'left',
itemId: 'colLastUpdDt',
editable: false
}
]
});
this.callParent();
}
});
Related
Here is my code, i need the button is down of the filefield, but the butto doesnt appear in nowhere, whats the problem?
Ext.define('Academico.view.etpPersonalizada.Edit', {
extend: 'Sharedev.form.Panel',
alias: 'widget.academico-etpPersonalizadaEdit',
store: 'Academico.store.EtpPersonalizadas',
model: 'Academico.model.EtpPersonalizada',
cls: 'sharedev-overflow--visible',
layout: {
type: 'vbox',
align: 'center',
},
initComponent: function () {
this.items = [
{
xtype: 'panel',
cls: 'sharedev-card',
bodyPadding: 15,
items: [
{
xtype: 'container',
name: 'Período desta Etapa',
layout: {
type: 'hbox',
},
items: [
{
xtype: 'datefield',
name: 'pssEtpDtInicio',
fieldLabel: 'Início',
readOnly: true,
disabled: true
},
{
xtype: 'datefield',
name: 'pssEtpDtFim',
fieldLabel: 'Fim',
readOnly: true,
disabled: true
}
]
},
{
xtype: 'panel',
cls: 'sharedev-card',
layout: {
type: 'auto',
},
width: 600,
name: 'Período desta Etapa',
items: [
{
xtype: 'displayfield',
value: 'Observação do Coordenador',
cls: 'sharedev-card-title sharedev-bold',
},
{
xtype: 'displayfield',
margin: '15 0 15 15',
style: 'opacity:0.5',
name: 'etpPrtObsCoord',
cls: 'sharedev-card-subtitle sharedev-bold',
},
]
},
{
xtype: 'panel',
name: 'panel2',
items: [
{
xtype: 'textareafield',
name: 'etpPrtObsAcad',
padding: '0 8 0 0',
width: 600,
fieldLabel: 'Observação'
},
{
xtype: 'filefield',
name: 'arqArquivo',
fieldLabel: 'Arquivo',
emptyText: 'Selecione um arquivo',
maxLength: 100,
minLength: 10,
buttonConfig: {
width: 103,
text: 'Procurar...',
iconCls: 'icon-search'
}
},
{
Try to put here, nothing is show.
xype: 'button',
name: 'btnArquivo',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
height: 60,
}
]
}
],
Same thing here.
bbar: {
xype: 'button',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
}
}
]
this.callParent(arguments);
}
});
The problem is the buttons doesn't appear, no matter where i put them. I'm using extJS 4.2.
You have a typo,
xype: 'button'
It should be
xtype: 'button'
I have a grid panel and it contains an add button. On clicking the button, a pop of form should be displayed. But I am getting this error continuously. GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438244873178 404 (Not Found)
Here is my List.js file that contains the grid
Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Address',
dataIndex: 'address',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Faculty',
dataIndex:'faculty',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
iconCls: 'fa fa-plus',
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
text: 'Edit',
iconCls: 'fa fa-edit',
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
text: 'Delete',
iconCls: 'fa fa-trash-o',
listeners: {
click: 'onDelete'
}
}]
}
]
});
And here is the controller
onAdd: function(button, e, options)
{
this.createDialog(null);
},
createDialog: function(record)
{
var me = this,
view = me.getView();
debugger;
me.dialog = view.add({
xtype: 'student-form'
})
me.dialog.show();
}
And heres the Student Form
Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
alias: 'widget.student-form',
height: 270,
width: 400,
layout: {
type: 'fit'
},
title: 'Add Student',
closable: false,
modal: true,
items: [{
xtype: 'form',
reference: 'form',
bodyPadding: 5,
modelValidation : true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Student Information',
layout: 'anchor',
defaultType: 'textfield',
defaults: {
anchor: '100%',
msgTarget: 'side',
labelWidth: '75'
},
items: [
{
xtype: 'hiddenfield',
name: 'id',
fieldLabel: 'Label'
},
{
fieldLabel: 'Name'
},
{
fieldLabel: 'Address'
},
{
fieldLabel: 'Phone'
},
{
fieldLabel: 'Email'
},
{
xtype: 'combo',
fieldLabel: 'Faculty',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
editable: false,
name: 'faculty-id',
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Save',
iconCls: 'fa fa-check',
listeners: {
click: 'onSave'
}
},
{
xtype: 'button',
text: 'Cancel',
iconCls: 'fa fa-times',
listeners: {
click: 'onCancel'
}
}
]
}]
}]
}]
});
So, how can I load the Student form as a pop up window. Any suggestion?
heres the error list:
GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438247043981 404 (Not Found)
Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.student-form
[E] [Ext.Loader] Some requested files failed to load.
In your controller's method change from:
createDialog: function(record)
{
var me = this,
view = me.getView();
debugger;
me.dialog = view.add({
xtype: 'student-form'
})
me.dialog.show();
}
To:
createDialog: function(record)
{
Ext.createWidget('student-form');
}
How we can fixed the textbox width in extjs,Here i used the width property also but first time its displaying perfect but when we click on outside the textfield automatically width is changed. here is my code please provide any suggestion
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function() {
//renderTo: Ext.getBody();
var container = Ext.create('Ext.container.Container', {
items: [{
contentPaddingProperty: '10 10 10 10',
renderTo: Ext.get('main'),
border: false,
html: '<img src="image/syneLogo.jpg" height="100" width="950"/>'
}]
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.get('main'),
name: 'myForm',
width: 950,
height: 800,
border: false,
frame: false,
// title:'Login',
bodyBorder: false,
fieldDefaults: {
labelWidth: 60
},
padding: '150 25 25 300',
items: [
{
align: 'center',
xtype: 'fieldset',
cls: 'my-fieldset-legend',
width: 400,
height: 250,
title: 'CAS Login',
collapsible: false,
items: [
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtuser',
fieldLabel: 'User ID',
name: 'enter user id',
emptyText: 'enter user id'
},
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtpass',
fieldLabel: 'Password',
name: 'pass',
emptyText: 'enter password',
inputType: 'password'
},
{
align: 'center',
cls: 'btn-margin',
border: false,
padding: '10 100 10 10',
buttons: [
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Submit',
width: 40,
handler: function()
{
var usr = this.up("form").getForm().findField("txtuser").getValue();
alert('Welcome--> ' + usr);
}
},
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Reset',
width: 40,
handler: function()
{
form.getForm().reset();
alert('Fields are cleared now');
}
}]
},
{
xtype: 'container',
height: 25
},
{
xtype: 'label',
padding: '150 5 5 100',
text: 'Please enter user id and password'
}
]
}
]
});
});
Use proper combination of layouts, probably you can try using 'fit' layout.
If the issue persist then try using minWidth config property of textfield.
I need to hide the specific column in grid on load of grid. i.e., child columns. Even i use hidden: true is also not working.
Ext.apply(this, {
store: App.mcmTaskStore,
columnLines: true,
columns: [
{ header: 'P', sortable: false, width: 25, dataIndex: 'Priority', renderer: priorityRenderer }, //false because it's H M L and it sorts alphabetically
{ header: 'START', sortable: true, width: 100, dataIndex: 'StartDateFormatted', hidden: true, renderer: this.mcmCustomRenderer},
{
header: 'Incoming Flights',
columns: [
{ header: 'FLT', sortable: true, width: 80, dataIndex: 'IncomingFlightNumber', renderer: this.mcmCustomRenderer },
{ header: 'ETA', sortable: true, width: 120, dataIndex: 'IncomingFlightEta', renderer: startDateCustomRenderer },
{ header: 'CTY', sortable: true, width: 60, dataIndex: 'IncomingFlightStation', renderer: this.mcmCustomRenderer },
{ header: 'GT', sortable: true, width: 50, dataIndex: 'IncomingFlightGate', hidden: true, renderer: this.mcmCustomRenderer}
]
},
{ header: 'END', sortable: true, width: 100, dataIndex: 'EndDateFormatted', hiddden: true, renderer: this.mcmCustomRenderer},
{
text: 'Outgoing Flights',
columns: [
{ header: 'FLT', sortable: true, width: 80, dataIndex: 'OutgoingFlightNumber', renderer: this.mcmCustomRenderer },
{ header: 'ETD', sortable: true, width: 120, dataIndex: 'OutgoingFlightEtd', renderer: endDateCustomRenderer },
{ header: 'CTY', sortable: true, width: 60, dataIndex: 'OutgoingFlightStation', renderer: this.mcmCustomRenderer },
{ header: 'GT', sortable: true, width: 50, dataIndex: 'OutgoingFlightGate', hiddden: true, renderer: this.mcmCustomRenderer}
]
},
{ header: 'PAX NAME', sortable: true, width: 250, dataIndex: 'Name', renderer: this.mcmCustomRenderer },
{ header: 'COMMENTS', sortable: false, flex: 1, dataIndex: 'Notes', hiddden: true, renderer: this.mcmCustomRenderer},
{ header: 'AGENT NAME', sortable: true, width: 250, dataIndex: 'AgentName', renderer: this.mcmCustomRenderer },
{ header: 'TASK TYPE', sortable: true, width: 120, dataIndex: 'TaskType', renderer: this.mcmCustomRenderer }
],
tbar: mcmTbar
});
Please help me. Thanks in advance.
You've written 'hiddden' with 3 'd' in some places. I bet that's where it doesn't work.
I have the following extJs window which has two tabs in it. One of the tab has got a column chart and the other one has a grid. Everything is working fine but what i want to accomplish here is that if i maximize the window the tabs size+ the charts size in the tabs should too. How can i accomplish it. I also have two calendar fields in the window above the tabs..
var win = Ext.create('Ext.Window', {
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
items: [
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'From',
anchor: '90%'
},
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'To',
anchor: '90%'
},
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
},
{
xtype: 'tabpanel',
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [
{
title: 'Normal Tab',
items: [
{
id: 'chartCmp',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
grid: true,
fields: ['name']
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}
]
}
]
},
{
title: 'Table View',
xtype: 'grid',
width: 200,
height: 200,
collapsible: false,
store: store1,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [
{
text: 'Devices',
flex: 50,
dataIndex: 'name'
},
{
text: 'Pass',
flex: 50,
dataIndex: 'data1'
}
]
}
]
}
]
});
On resize event of window, change width of tabs size and the charts size however you want. Write a function which will execute on window resize event, In function you can access your fields like below :
var tab = Ext.getCmp('tabId');
var chart = Ext.getCmp('chartId');
change lengths of tab and chart according to your requirement.
Check out window resize event here.