I want to fix my table/grid header in my ExtJs 4.2 application, so that the header is allways visible, while scroling. The main grid in my application has a fixed header and is implemented as in the code in the bottom of this post.
It is not working and I don't know why...
I tried it with the split attribute, but it isn't working, too... :(
This is the code:
function openThePopup() {
var win = new Ext.Window({
modal : true,
height : 500,
width : 900,
plain : true,
border : false,
resizable : false,
maximizable : false,
draggable : true,
closable : true,
closeAction : 'destroy',
title : 'Title',
autoScroll : true,
buttonAlign : 'center',
items : [ {
xtype : 'grid',
id : 'theGrid',
store : theStore,
border : 0,
layout : 'fit',
margins : '5 0 0 0',
split : true,
columns : [ {
text : 'Country',
dataIndex : 'country'
}, {
text : 'City',
dataIndex : 'city'
}, {
text : 'ZIP',
dataIndex : 'zip'
}, {
text : 'Street',
dataIndex : 'street',
width : 200
}, {
text : location,
dataIndex : 'name',
width : 200
} ],
listeners : {
itemdblclick : function(t, record, item, index, e, eOpts) {
...
}
}
} ],
buttons : [ {
onClick : function() {
...
}
} ]
}).show();
}
I appriciate any help.
Thank you very much in advance.
Best wishes to all of you.
Your layout isn't configured correctly. The layout: 'fit' should go on the window and the layout configuration should be removed from the grid. Also remove the autoScroll config on the window.
Related
The thing is that i'm trying to bind the form values after itemtap in sencha touch 2, and setting the data over the form View, but not seems to work :(, i have the next code:
//the controller file
Ext.define( 'myApp.controller.myController' ,
{
extend : 'Ext.app.Controller',
config :
{
refs :
{
myNavigationView : '#myNavigationView',
detailView : '#detailView'
},
control :
{
'#listView' :
{
itemtap : 'itemSelected'
}
}
},
itemSelected : function ( list , index , target , record , e , eOpts )
{
var me = this;
me.getMyNavigationView().push( { xtype : 'detailView' } );
var detailView = me.getDetailView().down( '[itemId=detailData]' );
detailView.setData( record.data );
}
} );
//the detailViewFile
Ext.define( 'myApp.view.DetailView' ,
{
extend : 'Ext.form.Panel',
xtype : 'detailView',
id : 'detailView',
config :
{
title : 'Detail',
layout :
{
pack: 'top'
},
items :
[
{
xtype : 'fieldset',
itemId : 'detailData',
items :
[
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
value : '{modelValue1}'
},
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
value : '{modelValue2}'
}
]
}
]
}
} );
The result that i'm getting is the form with its fields and the value looks like this
{modelValue 1}
and it is not getting the value from the record, i have and store and a model, i have try to print on console the value from the record, and it has a value so, the question is, is there a way to bind the values from a list item to set them on the detail view, or the only way is to set manually each text field?
I have found the solution, the only thing that is need, is that use the set Record method over the form view and at the names on each text field, must be equals to the field name on the model.
here is the example code :
//the controller file
Ext.define( 'myApp.controller.myController' ,
{
extend : 'Ext.app.Controller',
config :
{
refs :
{
myNavigationView : '#myNavigationView',
detailView : '#detailView'
},
control :
{
'#listView' :
{
itemtap : 'itemSelected'
}
}
},
itemSelected : function ( list , index , target , record , e , eOpts )
{
var me = this;
me.getMyNavigationView().push( { xtype : 'detailView' } );
var detailView = me.getDetailView();
detailView.setRecord( record );
}
} );
//the detailViewFile
Ext.define( 'myApp.view.DetailView' ,
{
extend : 'Ext.form.Panel',
xtype : 'detailView',
config :
{
title : 'Detail',
itemId : 'detailView',
layout :
{
pack: 'top'
},
items :
[
{
xtype : 'fieldset',
itemId : 'detailData',
items :
[
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
name : 'modelFieldName1'
},
{
xtype : 'textfield',
label : 'Some value',
disabled : true,
name : 'modelFieldName2'
}
]
}
]
}
} );
How can I add a specialkey event to all fields of a from.panel? In this form panel every field act on one method for searching my store my store name 'S01I009001',
Can anybody help me?
apology for my odd English.
Ext.define('${pkgName}.v01i009001.SV01I00900104' , {
extend : 'Ext.form.Panel',
alias : 'widget.sv01i00900104',
requires : ['Ext.form.field.Text'],
id : 'sv01i00900104',
padding : '0 0 0 0',
defaults: {
activeRecord : null,
border : true,
layout : 'hbox',
fieldDefaults : {
anchor : '100%',
labelAlign : 'right'
}
},
initComponent : function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
me = this;
me.items = [{
xtype : 'fieldcontainer',
combineErrors : true,
defaults : {
layout : 'fit',
margin : '3 5 1 5',
hideLabel : false,
labelAlign : 'top'
},
items: [{
xtype : 'numberfield',
name : 'id',
fieldLabel : 'REBATE ID:',
width : 100,
minValue : 0,
mouseWheelEnabled : false,
hideTrigger : true,
decimalPrecision : 0,
keyNavEnabled : false
},{
xtype : 'datefield',
name : 'endDate',
fieldLabel : 'End Date:',
flex : 1,
format : 'M d, Y',
altFormats : 'd/m/Y|M d, Y h:i A',
id : 'enddt-sv01i00900104',
vtype : 'daterange',
startDateField : 'startdt-sv01i00900104'
}]
}];
me.callParent(arguments);
}
});
I think this is your solution. If i right
init: function() {
this.control({'sv01i00900104 *' : {
specialkey: function (field, el) {
if (el.getKey() == Ext.EventObject.ENTER || el.getKey()==el.TAB){
this.filter()
}
}
}
});
},
filter:function(){
var form = Ext.getCmp('sv01i00900104').getForm(),
idValue = form.findField('id').getValue(),
endDate = form.findField('endDate').getValue(),
filters = new Array();
if(idValue){
filters.push({property:'id', value:idValue});
}
if(endDate){
filters.push({property:'endDate', value:endDate});
}
var store = Ext.data.StoreManager.lookup(storeName);
store.clearFilter();
store.loadPage(1, {
filters : array
});
}
I have a ProfileView which should show some user data. This is the first time I am trying to get data from MySql and showing it on a Sencha view.
The view
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
var myStore = Ext.create("Ext.data.Store", {
model : "MyApp.model.User",
proxy : {
type : "ajax",
url : "php/get_user.php",
reader : {
type : "json"
// rootProperty : "users"
}
},
autoLoad : true
});
The data is returned correctly but nothing is shown, and this I am trying to figure out.
The Response
[{"ID":"19","USERNAME":"Annet","EMAIL":"annet#annet.nl"}]
I skipped the rootProperty because it is a single user.
The Model
Ext.define('MyApp.model.User', {
extend : 'Ext.data.Model',
config : {
fields : [{
name : 'ID',
type : 'int'
}, {
name : 'USERNAME',
type : 'string'
}, {
name : 'EMAIL',
type : 'string'
}]
}
});
So, why does the list not show anything ?
Update
I check to see it the store contains data and it does
map: Object
ext-record-1: Class
_data: Object
EMAIL: "annet#annet.nl"
ID: 19
USERNAME: "Annet"
id: "ext-record-1"
__proto__: Object
Why is it not picked up by the list? I tried DataView as well.
You need to use itemTpl, i changed code for you.
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
itemTpl : '<div>{ID} <span> {USERNAME} </span> <span> {EMAIL} </span> </div>',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
When i press save button then its work fine. But I face some problem when i press enter on this field the error message is this.up(...).down(...) is null. My from window is given below.
I just want to, when you press enter on a textbox, it will act like you clicked the button.
Can anyone help?
Ext.define('${pkgName}.v01i002001.SV01I00200201' , {
extend : 'Ext.window.Window',
alias : 'widget.sv01i00200201',
id : 'sv01i00200201',
title : 'MANUFACTURE :: SV01I00200201',
minimizable : false,
maximizable : false,
autoShow : true,
resizable : false,
border : false,
modal : true,
padding : '0 5 0 5',
icon : "${resource(dir: 'images', file: 'APP01003.png')}",
layout : {
type: 'vbox',
align: 'stretch'
},
initComponent : function () {
var me = this;
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
this.items = [
{
xtype : 'form',
bodyStyle : {
padding : '10px',
border : true
},
tbar: Ext.create('Ext.ux.StatusBar', {
id : 'win-statusbar-sv01i00200201',
topBorder :true,
text :'Status',
defaultIconCls : 'info',
defaultText : 'Status'
}),
items : [{
xtype : 'textfield',
fieldLabel : 'Id',
name : 'id',
width : 265,
anchor : '95%',
emptyText : 'Not need...',
readOnly : true
},{
xtype : 'textfield',
fieldLabel : 'Manufac. Name',
emptyText : 'Write Manufacturer name',
allowBlank : false,
name : 'name',
width : 265,
anchor : '95%',
listeners: {
specialkey : function(field, e){
if (e.getKey() == e.ENTER || e.getKey()==e.TAB) {
//Ext.get('save-sv01i00200201').dom.click(); //it work
// this.up().up().down('button[action=save]').fireEvent('click'); //TypeError: button.up is not a function
// this.up('sv01i00200201').down('button[action=save]').fireEvent('click');//TypeError: button.up is not a function
// this.up('window').down('button[action=save]').fireEvent('click'); //TypeError: button.up is not a function
}
}
}
}]
}]
this.buttons = [
{
text : 'Save',
icon : "${resource(dir: 'images', file: 'SAV01004.png')}",
id : 'save-sv01i00200201',
action : 'save'
},{
text : 'Close',
icon : "${resource(dir: 'images', file: 'CLS01001.png')}",
scope : this,
handler : function(button){
var win = button.up('window');
win.close();
}
}]
me.callParent(arguments);
}
});
My controller given below
Ext.define('${pkgName}.C01I002001', {
extend : 'Ext.app.Controller',
requires: [],
views:[
'V01I001000',
'v01i002001.SV01I00200100',
'v01i002001.SV01I00200101',
'v01i001001.SV01I00200104',
'v01i001001.SV01I00200106',
'v01i002001.SV01I00200201',
'v01i002001.SV01I00200301'
],
refs : [{
ref : 'v01i002001',
selector: 'window'
}],
init: function() {
manuStore = Ext.data.StoreManager.get('S01I002001');
var me = this;
me.category = undefined;
me.control({
'sv01i00200201 button[action=save]': {
click : this.manufacturerSave
}
});
},
manufacturerSave : function(button){
win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
if(form.getForm().isValid()){
var manufacturer = Ext.create('${appName}.model.M01I002001',{
name:values.name
});
manufacturer.save({
scope:this,
success:function(records, operation){
var text = operation.response.responseText,
json = Ext.decode(text);
form.loadRecord(records);
controller000.statusbar('sv01i00200201', json.message, 'saveInfo', 'activecaption');
manuStore.load();
var win = Ext.getCmp('sv01i00200201');
controller000.closeWindow(win);
},
failure:function(model, operation){
controller000.statusbar('sv01i00200201', operation.error, 'warnInfo', 'red');
}
});
}else{
controller000.statusbar('sv01i00200201', 'Necessary Field Required', 'warnInfo', 'red');
}
}
});
this.up() bubbles up through only one level targeting the direct parent of your field (the form panel). Try one of these options instead :
this.up().up().down('button[action=save]').fireEvent('click');
this.up('window').down('button[action=save]').fireEvent('click');
this.up('#sv01i00200201').down('button[action=save]').fireEvent('click');
Take a look at the documentation ;)
Part 2 : "button.up is not a function"
I think I got it, you have to manually pass the button as an argument to the fireEvent function :
var button = this.up('window').down('button[action=save]');
button.fireEvent('click', button);
At last i do it by createing id like as
Ext.get('save-sv01i00200201').dom.click();
button modified and create id
{
text : 'Save',
icon : "${resource(dir: 'images', file: 'SAV01004.png')}",
id : 'save-sv01i00200201',
action : 'save'
}
*This is my view, i am creating panel, * i want to add Ext.List to the panel
Ext.define('myApp.view.MyWant', {
extend : 'Ext.Panel',
xtype : 'mywant',
initialize : function() {
console.log(localStorage.currentuser + " in MyWant View");
var newWant = {
xtype : 'button',
iconCls : 'add',
ui : 'action',
handler : this.onTapNew,
scope : this
};
var topToolbar = {
xtype : 'toolbar',
docked : 'top',
defaults : {
iconMask : true
},
title : 'My Wants',
items : [{
xtype : 'spacer'
}, newWant]
};
var myWantsList = {
xtype : 'panel',
flex : 1,
id : 'mywantslist',
html : 'want list'
};
this.add(topToolbar);
this.add(myWantsList);
},
config : {
layout : {
type : 'vbox'
}
}
});
i am adding below list to myWantsList Panel from controller (the below code is in controller)
var myWantList = Ext.create('Ext.List', {
itemCls : 'my-dataview-item',
html : 'wants-list',
itemTpl : '<div><img src="'+localStorage.httpServerPrefix+
'{imageURI}"/><span class="list-item-title">{fullname}</span><span id="count" class="list-item-title">{replyCount}</span><p class="list-item-title">{text} <span id="time" class="list-item-title">{time}</span></p>',
store : myWantStore
});
Ext.getCmp("mywantslist").add(myWantList);
I checked inspect element ,there is a code...
but its displaying blank
You have to set a property on list define, renderTo, example:
var myWantList = Ext.create('Ext.List', {
renderTo: mywant.getComponent().element.dom,
itemCls : 'my-dataview-item',
html : 'wants-list',
itemTpl : '<div><img src="'+localStorage.httpServerPrefix+
'{imageURI}"/><span class="list-item-title">{fullname}</span><span id="count" class="list-item-title">{replyCount}</span><p class="list-item-title">{text} <span id="time" class="list-item-title">{time}</span></p>',
store : myWantStore
});