I am trying to create factory functions as per factory-functions-in-ext-extensions,
below is my code
Ext.ns('MyApp');
MyApp.SubmitButton = Ext.extend(Ext.Button, {
text:'Submit'
,iconCls:'icon-disk'
,initComponent:function() {
MyApp.SubmitButton.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}); // eo extend
var btn = new MyApp.SubmitButton();
Ext.reg('submitbutton1',btn);//this is not working
Ext.reg('submitbutton', MyApp.SubmitButton );//this works
var win1;
if(!win1) {
win1 = new Ext.Window({
title : 'title',
closeAction : 'hide',
autoHeight : true,
autoWidth : true,
height : 300,
width : 500,
items : [{xtype:'submitbutton1',id:'submitbutton'}]
});
}
win1.show();
when i run this it throws error "b[d.xtype || e] is not a constructor"
You cannot use an instance of a class for registering xtype. You have to use the classname for it. Ext doesn't keep track of the instances you are creating, but just register the custom component class - so that you can just use this way:
var button = new MyApp.SubmitButton({
id : 'submitbutton'
});
OR,
{
xtype : 'submitbutton',
id:'submitbutton'
}
Both are same. Check Saki's this article for more information.
Related
I am trying to pass values from one view to another view, Below is the code what I have tried so far but no luck,
view1.js
var newWindow = Ext.create( 'newView', {"clickedRule" : clickedvalue} );
signerWindow.show();
newView.js
Ext.define('newView', {
extend : 'Ext.window.Window',
id : 'newWindow',
constructor : function (clickedRule){
Ext.applyIf(this, clickedRule);
this.callParent();
},
requires : ['Ext.form.Panel'],
title : 'Title Selection'+ this.clickedRule
});
I am getting undefined, your help is greatly appreciated.
Thanks in advance.
Do it in Ext.create:
var newWindow = Ext.create( 'newView', {
clickedRule : clickedvalue,
title : 'Title Selection ' + clickedValue
});
newWindow.show();
and lose the title config on the class:
Ext.define('newView', {
extend : 'Ext.window.Window',
id : 'newWindow',
constructor : function (clickedRule){
Ext.applyIf(this, clickedRule);
this.callParent();
},
requires : ['Ext.form.Panel']
});
Edit from comment:
You will have to put it in the initComponent function in that case:
this refers to an instance of your window class so won't be available in the class definition (config statements) but you can access it after the class has been initialized using the initComponent function:
Ext.define('newView', {
extend : 'Ext.window.Window',
id : 'newWindow',
initComponent: function (){
var clickedRule = this.clickedRule;
// title can also be defined here
this.title = 'Title Selection ' + clickedRule;
this.callParent();
},
requires : ['Ext.form.Panel']
});
initComponent is the normal way of adding constructor logic to ExtJS components. See this in the docs.
Keep your original create statement:
var newWindow = Ext.create( 'newView', {clickedRule : clickedvalue} );
You can access the clickedRule property after the create statement:
console.log(newWindow.clickedRule);
I am very new to Sencha and I am trying to get a button under a DataView in a Panel. I have tried different scenario's.
The View
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
initialize : function() {
var me = this;
var record = 1;
//Create the instance of the store and load it
var userStore = Ext.create('MyApp.store.UserStore');
userStore.load();
//Create the dataview
var view = Ext.create('Ext.DataView', {
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
//Add the dataview to the panel
me.add(view);
/**
var button = Ext.create('Ext.Button', {
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
});
*/
//me.add(button);
},
config : {
title : 'Profiel',
iconCls : 'user3',
scrollable : true,
styleHtmlContent : true,
items : [{
xtype : 'button',
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
}]
}
});
The above view shows only the button but NOT the Dataview. I needed to add
layout : 'fit'
to the config to make it show DataView. But in combination with the button it makes the button fullscreen and the dataview is not shown anymore (???).
I tried both scenario's where I add a Button as config item and by using the handler.
How can I get the button below the dataview ??
Thanks for your help.
Don't use layout fit, it's made to fit one component in your canvas. I'd use a vbox layout. Which automatically puts items vetically under each other.
Try this:
layout: {
type: 'vbox',
align: 'stretch' //this tells to take the full width
}
Flex your dataview
var view = Ext.create('Ext.DataView', {
flex: 1, //Use the remaining space.
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);
I have an EXT form that opens a window containing an GridPanel where the data store needs to get updated each time the form is submitted. The grid displays a list of files that are uploaded from the client computer. All of this works fine until I close the window and select a different group of files. The problem I am having is when the window containing the grid is closed and then re-opened, it is displaying the first set of files loaded previously instead of the new list of files submitted from the form. Hopefully this makes sense.
I have tried grid.getView().refresh() but that doesn't update the grid. Below is my code for the window, form, grid, and JSON store. If anyone has seen this before I would sure appreciate some advice. (apologies for the code formatting...had a lot of trouble getting it to be readable this text box)
//window that holds grid
SPST.window.POGCheckInWindow = Ext.extend(SPST.window.WindowBaseCls, {
id: 'POGCheckInWindow'
,initComponent:function() {
var config = {
title: 'Check In POG Files'
,width : 1000
,height : 500
,maximizable: false
,shadow : false
,closeable: true
,closeAction: 'hide'
,items: [{
xtype : 'checkin_results_grid'
,id : 'POGCheckInGrid'
,height : 450
,width : 990
,frame : true }
]};
Ext.apply(this, Ext.apply(this.initialConfig, config));
SPST.window.POGCheckInWindow.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('pog_checkin_window',SPST.window.POGCheckInWindow);
//function to submit the form, load the store and open the window containing the gridpanel
checkin:function() {
if (this.getForm().isValid()){
this.getForm().submit({
url: 'components/POG.cfc?method=uploadPOGTemp' + '&dsn=' + SPST_dsn
,method: 'GET'
,scope:this
,success: function(form, action){
var chkinwin = new SPST.window.POGCheckInWindow();
Ext.getCmp('POGCheckInGrid').getStore().load({params: {dsn: SPST_dsn,
pogfiles: action.result.pogfiles, project_id: action.result.project_id}
,callback: function(rec, options, success){
Ext.getCmp('POGCheckInGrid').getView().refresh();
}
});
chkinwin.show();
}
,failure:this.showError
,waitMsg:'Uploading files...'
});
}
}
// create the data store for grid
var chkstore = new Ext.data.JsonStore({
// JsonReader configuration
root : 'jsonlist'
,fields : chkfields
,id : 'chkstoreid'
// JsonStore configuration
,autoLoad : true
,remoteSort : true
,autoDestroy: true
,sortInfo: {
field: 'POGNAME',
direction: 'ASC'
}
,url : 'components/POG.cfc?method=getPOGTempFiles' + '&dsn=' + SPST_dsn
});
//grid that loads inside ext window
SPST.grid.POGCheckInGrid = Ext.extend(SPST.grid.GridPanelBaseCls, {
view: new Ext.grid.GridView({
getRowClass: function(rec, idx, rowPrms, ds)
{
return rec.data.VERSION_DSC === 'INVALID VERSION#' ? 'invalid-cls' : '';
}
}),
initComponent : function() {
var config = {
colModel : chkcolModel
,selModel : chkselModel
,store : chkstore
,autoDestroy: true
,xtype : 'checkin_results_grid'
,buttons: [
{
text: 'Upload'
,handler: this.loadPOGCheckin
,scope : this
},
{
text: 'Cancel'
,handler: this.checkinwindowclose
,scope : this
}
]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
SPST.grid.POGCheckInGrid.superclass.initComponent.apply(this, arguments);
}
,onRender : function() {
this.getBottomToolbar().bindStore(chkstore);
SPST.grid.POGCheckInGrid.superclass.onRender.apply(this, arguments);
}
From what I understood, you don't need to only refresh the view, but also reload the store according to the different set of files that you selected..
So, instead of doing
grid.getView().refresh() use grid.getStore().reload([new-options-if-required]);.. This will reload the store according to the options passed, if any, or reload the store according to the last load options.
i am tring to display lable of form in marathi language for that
am creating marathi.js
this my mararhi.js
if(Ext.app.formPanel)
{
Ext.apply(Ext.app.formPanel.prototype,
{
selectUser:'नाव'
}
);
}
and my other js file contain this
var Ext.app.formPanel = Ext.extend(Ext.form.FormPanel,{
selectUser:'Select User',
initComponent : function(config) {
Ext.apply(this, {
title : 'User Rights',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 755,
id : 'formUserRights',
renderTo:'adminpanel',
items : [ id: 'User',
fieldLabel:this.selectUser,
width:200
] //items
});//Ext.apply
Ext.app.formPanel.superclass.initComponent.apply(this, arguments);
}//init component
}); //yuyu
......
....
but it can not work
it gives error ; missing before
var Ext.app.formPanel = Ext.extend.....
but when i checked all carefully every thing is correctly nested.
First thing, the syntax error that vava noted in his comment above.
Second, you should not var the 'Ext.app.formPanel' namespace.
Third, initComponent does not pass any arguments.
Fourth, you need to call the superclass, not apply it - also no need to pass arguments, as there are none.
Ext.ns('Ext.app');
Ext.app.formPanel = Ext.extend(Ext.form.FormPanel, {
selectUser : 'Select User',
initComponent : function() {
Ext.apply(this, {
title : 'User Rights',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 755,
id : 'formUserRights',
renderTo : 'adminpanel',
items : [ {
id : 'User',
fieldLabel : this.selectUser,
width : 200
} ]
});
Ext.app.formPanel.superclass.initComponent.call(this);
}
});
On a side note, I prefer not to use the Ext namespace for my app code, there is a chance for collision that way. I would suggest creating your own namespace.
Enjoy this one on the house, with the hope that someday you will actually award answers.