I am using ExtJS 4.2.0 and testing on google chrome 42.0.2311.152 m. Here
is my fiddle:('ct' is nothing but just a div)
http://jsfiddle.net/5zpx4556/
Ext.define('SimpleGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.SimpleGrid',
columns: [
{
dataIndex: 'name'
}, {
dataIndex: 'status'
}, {
dataIndex: 'enabled'
}
],
store: {
fields: ['sex', 'name', 'status', 'enabled'],
data: [
{ sex: 'male', name: 'Tom', status: 'Available', enabled: true }
]
}
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
renderTo:'ct',
items: [
{
xtype: 'SimpleGrid'
}
]
});
I have already posted this as a bug in the sencha forum but would be great if someone could provide a workaround for this scenario if at all it is a bug.
Not sure of the align:'stretch' has anything to do with it but there should be no reason to render the extra column.
Any help appreciated.
Thanks.
It is not a column, it is just empty space left after rendering three columns. Add flex:1 to one of the columns to fill the width.
Related
I need to develop a view in Sencha Touch where some form fields, textarea & button have to be put just after a list; following is the source code:
Ext.define('myapp.view.MyNotes',{
extend: 'Ext.Panel',
xtype: 'admissionnotes',
requires: [
'myapp.view.MyAppTitle',
'myapp.view.MyList',
'myapp.view.MyForm',
'myapp.view.MyAppTabBar'
],
config: {
layout: 'fit',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'myapptitle'
},
{
xtype: 'myapplist'
},
{
xtype: 'myform'
},
{
xtype: 'myapptabbar'
}
]
}
});
The problem is that these form fields are overlapping my list. Can somebody assist to resolve this isssue?
Thanks
Maybe vbox layout would be more appropriated than fit?
layout: {type: 'vbox', align: 'stretch'}
This seems like a trivial issue, but... I have a list of addresses in a panel to which I wish to add geolocation coordinates (and to display them on a map) that is rendered in a form panel, so that when I click on the address of interest in the panel an onTap is fired to do execute the onSelectGeolocation given below to open the form panel rendered in the ViewPort and to add any existing records to the associated form elements:
onSelectGeolocation: function(view, index, target, record, event) {
console.log('Selected a Geolocation from the list');
var geolocationForm = Ext.Viewport.down('geolocationEdit');
if(!geolocationForm){
geolocationForm = Ext.widget('geolocationEdit');
}
geolocationForm.setRecord(record);
geolocationForm.showBy(target);
}
The line that uses the setRecord method to write any existing records in my store to the form elements, however, is preventing the default values in my form panel below from getting written to the desired form elements. When I comment this out, all is good. Problem is that I need to grab those records that exist in my store, e.g., address, to display in my form. How can I do this AND write default values to my textfield elements in my form?
My form panel that is rendered as a ViewPort via the onTap is:
Ext.define('EvaluateIt.view.GeolocationEdit', {
extend: 'Ext.form.Panel',
alias : 'widget.geolocationEdit',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
width: 400,
height: 330,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'datepickerfield',
destroyPickerOnHide: true,
name : 'datOfEvaluatione',
label: 'Date of evaluation',
value: new Date(),
picker: {
yearFrom: 1990
}
},
{
xtype: 'textfield',
name: 'address',
label: 'Address',
itemId: 'address'
},
{
xtype: 'textfield',
name: 'latitude',
label: 'Latitude',
itemId: 'latitude',
value: sessionStorage.latitude,
},
/* {
xtype: 'textfield',
name: 'longitude',
label: 'Longitude',
itemId: 'longitude',
value: sessionStorage.longitude
},
{
xtype: 'textfield',
name: 'accuracy',
label: 'Accuracy',
itemId: 'accuracy',
value: sessionStorage.accuracy
},*/
{
xtype: 'button',
itemId: 'save',
text: 'Save'
}
]
}
});
Behavior is as expected. I will use Ext.getCmp on the id's for each item instead.
i have a form panel and a tree panel
the form is used to add new users, the tree is used to show the list of users
what i want is to right click a node in my tree ,click edit (already can do that) then i have my data in the add form panel and be able to modify there and update my user
so basically use the same form for adding and updating
this is how im trying to do up to know
but its not working at all
i added a model to my tree,i used loadRecord(rec), but i dont know how to bind my tree data with the form fields!
tried adding displayfield with same name from my tree model!!
my tree model and store:
Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text' },
{ name: 'id' }
]
});
window.ATreeStore = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
root: Ext.decode(objt.TreeToJson()),
proxy: {
type: 'ajax'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
my tree menu:
var myContextMenu = new Ext.menu.Menu({
items: [{
text: 'Edit',
handler: function () {
Ext.getCmp('addaform').getForm().loadRecord(rec);
}
}
}]
my form:
Ext.define("Ext.app.Adduser", {
extend: "Ext.form.Panel",
title: 'Add user',
id : 'addform',
closable: true,
collapsible: true,
animCollapse: true,
draggable: true,
resizable: true,
margin: '5 5 5 5',
height: 400,
frame: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
items: [{
layout: 'column',
border: false,
items: [{
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: ' Name',
name: 'name',
allowBlank: false,
displayfield:'id',//
anchor: '95%'
}]
}, {
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First name',
name: 'fname',
allowBlank: false,
anchor: '95%'
}, {
xtype: 'textarea',
fieldLabel: 'Profile',
name: 'prof',
anchor: '95%'
}]
}],
buttons: [{
text: 'Save',
handler: function () {
this.up('form').getForm().submit
({
url: 'AddData.ashx',
params: { action: 'add' },
success: function (form, action)
{
Ext.MessageBox.show({ title: 'Success !',
msg: 'User added successfully<br />',
icon: Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
}) }
}) }]
thank you
If your TreePanel uses a TreeStore which in turn has a Ext.data.Model, then when you right click on a node (say nodeA), you should be just able to do form.loadRecord(nodeA), the API for loadRecord is here
If it's still not clear, I think this blog post could help, it talks about loading a grid record into a form. I know it's not ExtJS 4, but the key functions are the same.
Ok, let me show this with a super simple example, hope it will help.
First we create the form that we want to display stuff in, note that the renderTo property is bound to a div inside my HTML, so you might need to change that. Also note that the name property of the textarea and textfield, they are the key for the loadRecord to work, they have to match the fields defined in the model later.
var form = Ext.create('Ext.form.Panel',{
renderTo : 'form-div',
items : [{
xtype : 'textarea',
fieldLabel : 'label 1',
name : 'name'
},{
xtype : 'textfield',
fieldLabel : 'label 2',
name : 'age'
}]
});
Next, we create the tree to display our data, we start by creating a simple model :
Ext.define('Person',{
extend : 'Ext.data.Model',
fields : [{
name : 'name',
type : 'string'
},{
name : 'age',
type : 'int'
}]
});
Then we create a TreeStore that uses that model and initialize it with some inline data:
var store = Ext.create('Ext.data.TreeStore',{
model : 'Person',
root : {
expanded : true,
children : [{
name : 'John',
age : 10,
leaf : true
},{
name : 'Joe',
age : 100,
leaf : true
}]
}
});
Then we create the tree to display the data in the store. (Note that the nodes will show up as "undefined" because we are not using the default "text" property of a Node)
var tree = Ext.create('Ext.tree.Panel',{
height : 300,
width : 300,
store : store,
rootVisible : false,
renderTo : 'tree-div',
listeners : {
itemclick : function(view, record){
form.loadRecord(record);
}
}
});
Now, you should see a tree with two nodes both displayed as "undefined" on your page, as well as a Form with a textarea and a textfield. If you click on a node inside the tree, the form will display the name and age of the selected node.
I have a form which has a number of different fields and ultimately will become a dynamic formPanel.
I've opted for the table layout since it's easier to lay out the components but for some reason, the defaults settings are not applying and no field Labels are being displayed for any fields.
I've set out the configuration like:
SearchForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
,labelWidth:80,
buttonAlign:'center'
,initComponent: function() {
var config = {
items: [{
layout:{
type:'table',
columns:5
},
defaults:{
//width:150,
bodyStyle:'padding:20px'
},
items:[{
xtype: 'label',
name: 'dateLabel',
cls: 'f',
text: "Required:"
},
{
xtype: 'datefield',
fieldLabel: "From Date",
value: yesterday,
width: 110,
id: 'date1'
},
{
xtype: 'datefield',
fieldLabel: "To Date",
id: 'date2',
width: 110,
value: yesterday
},
{
xtype: 'displayfield', value: ' ',
height:12,
colspan:2
}
],
buttons: [{
text: 'Submit',
id: "submitBtn",
handler: this.submit,
scope: this
},{
text: 'Reset',
id: "resetBtn",
handler: this.reset,
scope: this
}
]
}]};
// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
SearchForm.superclass.initComponent.apply(this, arguments);
}
});
The problem is because you're defining the layout to be table, hence ExtJS not rendering the labels of fields correctly.
In each column, wrap your fields with an Ext.Container and give the panel a layout of form. That will tell ExtJS to render the labels correctly.
In my Extjs4 application I have a grid and a form.
The user model:
Ext.define('TestApplication.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int', useNull: true },
{ name: 'email', type: 'string'},
{ name: 'name', type: 'string'},
{ name: 'surname', type: 'string'}
],
hasMany: { model: 'Agency', name: 'agencies' },
});
And the Agency:
Ext.define('Magellano.model.Agency', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int', useNull: true},
{name: 'name', type: 'string'}
]
});
Then in my form I'm creating the checkboxes:
[...]
initComponent: function() {
var store = Ext.getStore('Agencies');
var checkbox_values = {xtype: 'checkboxfield', name: 'agencies[]'};
var checkboxes = []
store.each(function(record){
var checkbox = {xtype: 'checkboxfield', name: 'agency_ids',
boxLabel: record.get('name'), inputValue: record.get('id')};
checkbox.checked = true;
checkboxes.push(checkbox)
});
this.items = [{
title: 'User',
xtype: 'fieldset',
flex: 1,
margin: '0 5 0 0',
items: [{
{ xtype: 'textfield', name: 'email', fieldLabel: 'Email' },
{ xtype: 'textfield', name: 'name', fieldLabel: 'Nome' },
}, {
title: 'Agencies',
xtype: 'fieldset',
flex: 1,
items: checkboxes
}];
[...]
Everything works well for sending form I am receiving all the data and can save it into database.
When user clicks on the grid the record is loaded in the form with the standard:
form.loadRecord(record);
The problem is that the checkboxes are not checked. Are there any naming conventions for checkbox elements so Extjs can detect what to set? How can I setup the relations so the form will understand what to check? Or should I do everything by hand?
In your form, you can do something like this :
{
xtype: 'checkboxfield',
name: 'test',
boxLabel: 'Test',
inputValue: 'true',
uncheckedValue: 'false'
}
I believe you have to use someCheckbox.setValue(true) to check a checkbox dynamically, or to uncheck someCheckbox.setValue(false)