We Keep Coding

Showing ValueField(Id) in the next page in Extjs ComboBox Pagination

I have the ExtJs form combo which shows the values in the dropdown as checkbox and the value to select. I have used the pagination to list all the values with no of pages. In the first page it is showing 'age' in the dropdown but when click for the next page it is displaying id's of the selected entries from the first page.
Ext.create('Ext.form.ComboBox', {
id: 'ageComboPickerReport',
name: 'ageComboPickerReport',
maxHeight: 150,
margin: '0 5 0 0',
width: 150,
emptyText: "Select tags",
listConfig: {
getInnerTpl: function (displayField) {
return '<div class="x-combo-list-item"><img src="" class="chkCombo-default-icon
chkCombo" /> {' + displayField + '}</div>';
},
autoEl: { 'q-name': 'rpt-age-criteria-list'
}, labelAlign: 'top',
pageSize: 25,
displayField: 'age', valueField: 'id', forceSelection: true, store: me.ageStore,
//Disable Typing and Open Combo
onFocus: function () {
if (!this.isExpanded) {
me.ageStore.load()
this.expand()
} this.getPicker().focus();
}
}),
could any tell me how to show the 'age'(displayField) instead of showing valueField(id)?

Fixing the size of a panel extjs 4.2

I'm trying to create a form that is surrounded with a small box and centered in the middle of my page. I tried to change the width and height of the panel border failed. And tried to center the form by changing the region property to center but the form remained at top left corner of the page. Any help in fixing this please?
Ext.onReady(function(){
LeaseNumber = Ext.create('Ext.form.TextField', {
id : 'LeaseNumber',
padding: '5 5 5 5',
fieldLabel: '<span style="font-size: 13px">Lease Number</span>',
width :'27%'
});
Company_Name = Ext.create('Ext.form.TextField', {
id : 'CompanyName',
padding: '5 5 5 5',
fieldLabel: '<span style="font-size: 13px">Company Name</span>',
width :'27%'
});
period = Ext.create('Ext.data.Store', {
fields: ['abbr','value','name'],
data : [
{"abbr":"daterange", "value":"daterange", "name":"Date Range"},
{"abbr":"sixmonths", "value":"sixmonths", "name":"6 Months"},
{"abbr":"threemonths", "value":"threemonths", "name":"3 Months"},
{"abbr":"onemonth", "value":"onemonth", "name":"1 Month"},
{"abbr":"fifteendays", "value":"fifteendays", "name":"15 Days"},
{"abbr":"sevendays", "value":"sevendays", "name":"7 Days"},
{"abbr":"oneday", "value":"oneday", "name":"1 Day"}
]
});
period_duration = Ext.create('Ext.form.ComboBox', {
store: period,
queryMode: 'local',
displayField: 'name',
padding: '5 5 5 5',
valueField: 'abbr',
fieldLabel: '<span style="font-size: 13px">Date Range</span>',
id:'type',
editable:false,
width: '25%',
listeners: {
},
//remove the cursor from the drop-down selection
onFocus: function() {
var me = this;
if (!me.isExpanded) {
me.expand()
}
me.getPicker().focus();
},
});
Date_Range = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: '25%',
bodyPadding: 10,
bodyStyle: 'background-color:#dfe8f5;',
border:false,
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: '<span style="font-size: 13px">From</span>',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: '<span style="font-size: 13px">To</span>',
name: 'to_date',
value: new Date()
}]
});
Submit = Ext.create('Ext.Button', {
text : '<span style="font-size: 11px">View Records</span>' ,
margin:'20 30 30 70',
padding:'3 3 3 3',
id : 'view_records',
//handler : onButtonClick
});
Clear = Ext.create('Ext.Button', {
text : '<span style="font-size: 11px">Clear</span>' ,
padding:'3 3 3 3',
margin:'20 30 30 0',
id : 'clear',
//handler : onButtonClick
});
lease_info_panel = Ext.create('Ext.panel.Panel', {
region :'center',
id:'lease_info_panel',
bodyStyle: 'background-color:#dfe8f5;',
padding:'10 0 10 0',
items : [LeaseNumber,Company_Name,period_duration,Date_Range,Submit,Clear]
});
form_panel = Ext.create('Ext.panel.Panel', {
region :'center',
layout : 'border',
width: '50%',
items : [lease_info_panel]
});
viewport = Ext.create('Ext.container.Viewport', {
layout : 'border' ,
renderTo :'body',
items : [form_panel]
});
});

region:'center' doesn't do anything unless the parent container/panel has layout:'border', and what it does can be found in the border layout docs: region:'center' does only work relatively to the other items in the layout.
The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
region:'south' is below, region:'north' is above, region:'west' is left, region:'east' is right, and region:'center' is between them, but not necessarily centered. (e.g. if some of the other regions have especially big items or no items at all).
What you are possibly searching for is a Window:
Ext.create('Ext.window.Window',{
width:200,
height:200,
title:'ABC',
draggable:false,
closable:false
}).show();
Compare fiddle.

Delete row from EditorGridPanel in Ext JS 2.0.2

I am new to Ext JS and I need to update an old app. The EditorGridPanel has an 'ADD' button and it works fine. However, I need to add a 'DELETE' button that deletes the row from the grid. Here is the code to the grid. Thanks for your help.
/*==== INVOICE DATA START =======================================================*/
var iLineItemCM = new Ext.grid.ColumnModel([
{id:'i_line_item_name', header: "Line Item Name", dataIndex: 'i_line_item_name', width: 280,
editor: new Ext.form.TextField({allowBlank: false})}
,{header: "Amount", dataIndex: 'i_line_item_amt', width: 80, align: 'right', renderer: 'usMoney',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})}
]);
var iLineItemRec =
new Ext.data.Record.create([
{name: 'i_line_item_name' ,mapping: 'i_line_item_name' ,type: 'string'}
,{name: 'i_line_item_amt' ,mapping: 'i_line_item_amt' ,type: 'string'}
]);
var iLineItemStore = new Ext.data.Store({
url: '',
reader: new Ext.data.JsonReader({
root: 'rows'
},
iLineItemRec
)
});
var iLineItemGrid = new Ext.grid.EditorGridPanel({
store: iLineItemStore,
cm: iLineItemCM,
width: 'auto',
height: 'auto',
//title:'Edit Plants?',
frame:false,
//plugins:checkColumn,
clicksToEdit:1,
viewConfig: {
//forceFit: true,
autoFit:true
},
id: 'iLineItemStore',
tbar: [{
text: 'Add Line Item',
handler : function(){
var r = new iLineItemRec({
i_line_item_name: '',
i_line_item_amt: ''
});
iLineItemGrid.stopEditing();
iLineItemStore.insert(0, r);
iLineItemGrid.startEditing(0, 0);
}
}]
});
///////////////////

From the docs for Cell Selection Model: http://docs.sencha.com/ext-js/2-3/#!/api/Ext.grid.CellSelectionModel
The cell model is specified as default.
getSelectedCell( ) : Array
Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).
So... something like
{ text: 'Remove',
tooltip:'Remove the selected item',
handler: function(){
iLineItemGrid.stopEditing();
var r = iLineItemGrid.getSelectionModel().getSelectedCell();
iLineItemStore.removeAt(r[1]); } }

Column layout in EXTJS

I am new to ExtJs. I need to create an entry form in 2 columns using column layout.
My code is as follows:
Ext.onReady(function(){
var patientForm = new Ext.FormPanel({
renderTo: "patientCreation",
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [
{
layout:'column',
items:[
{ // column #1
columnWidth: .33,
layout: 'form',
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
}
] // close items for first column
}]
}]
});
var win = new Ext.Window({
layout:'form',
closable: false,
resizable: false,
plain: true,
border: false,
items: [patientForm]
});
win.show();
});
But when I run the code, I got h is undefined error. How to design a form in column layout? Is there any procedure, steps or links which give a clear idea?

I have run the same code with ExtJs 3.2.2 and got a similar error. But when I removed renderTo: "patientCreation"
code worked:
That part is not necessary 'cause you are placing the form in a the window.

I do not know anything about ExtJS 3. If you are using ExtJS 4, then you have specified layout config at wrong place. You have specified it inside items config, it should not be inside items config.
Layout can be specified as follows in ExtJS 4:
Ext.define('your_domain_name.viewName', {
extend : 'Ext.panel.Panel',
alias : 'widget.any_name_you_want',
layout : 'column',
initComponent : function() {
this.items = [
// all items inside form/panel will go here
];
this.callParent(arguments);
}
});
You can get sample code about all the panels here

try applying renderTo config to window instead of form
check example

Why am I getting errors in ext-all-debug.js in lines 4236 - 4242?

I've developed a PHP framework that generates ExtJS code in the form of an application.
This involves building the full ExtJS object literal on the first call, e.g.:
Ext.onReady(function(){
menuItemStart = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start menu item.',
cls:'menuItem'
});
...
and then navigation in the application consists of event handlers which load PHP files via AJAX that output ExtJS code, and then execute this code with this function:
function loadViewViaAjax(url, paramTargetRegion) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval(scripts[1]);
}
}
});
}
This works well. However, I now have this situation where when a page is loaded from PHP instead of via a triggered ExtJS event handler, I get errors that are varied but all come from one block of code in the ext-all-debug.js file, namely in line 4236 and line 4242:
Has anyone experienced anything similar or know what could be causing this?
Addendum
Yes #ChrisR, here is an error I can reproduce on my machine:
It says it is getting the error in the fourth line of this code, but if I click on it, it takes me to line 4242 shown above in the ExtJS library code.
<script type="text/javascript">
clearExtjsComponent(targetRegion);
var panel_form = new Ext.FormPanel({
labelWidth: 100,
frame:true,
style: 'margin: 10px',
title: 'Test Product (TEST PAGE 2)',
bodyStyle:'padding:5px 5px 0',
width: 500,
defaultType: 'textfield',
items: [{
fieldLabel: 'ID',
value: "111",
name: 'id',
width: 370,
hidden: false,
style: 'text-align: right',
name: 'id',
width: 50,
hidden: false,
},{
fieldLabel: 'Product',
value: "Paper",
xtype: 'displayfield',
name: 'product',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "none",
name: 'product3',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "first line\<br/>second line\<br/>third line",
xtype: 'displayfield',
height: 100,
xtype: 'displayfield',
name: 'product4',
width: 370,
hidden: false,
}
],
buttons: [{
text: 'Save',
handler: function() {
if(panel_form.getForm().isValid()){
panel_form.getForm().getEl().dom.action = 'backend/application/help/test';
panel_form.getForm().getEl().dom.method = 'POST';
panel_form.getForm().submit({
success : function(form, action) {
replace_region_with_uri_content('backend/modules');
}
})
} else {
Ext.Msg.minWidth = 360;
Ext.Msg.alert('Invalid Form', 'Some fields are invalid, please correct.');
}
}
},{
text: 'Cancel',
handler: function(){
replace_region_with_uri_content('backend/modules');
}
}]
});
replaceComponentContent(targetRegion, panel_form);
hideComponent(regionHelp);
</script>

Is this on IE? If so, all the trailing commas in your code may be the issue (they certainly are an issue). Also, lots of duplicate configs in your first item. Try running JSLint on your code from time to time to catch stuff like that.