I have created window on sever side with LinkButton on bottom
<ext:Window runat="server" ID="winIndex" Title="Test">
<AutoLoad Url="index.html" Mode="IFrame" />
<Buttons>
<ext:LinkButton runat="server" ID="btn" Text="Test Button">
<Listeners>
<Click Handler="Ext.msg.alert('Alert','test');" />
</Listeners>
</ext:LinkButton>
</Buttons>
</ext:Window>
i wanted to create this window on client side using javascript this is what i tried
var CreateWindow = function () {
var windowConfig = {
id: "winIndex",
hidden: false,
closeAction: "hide",
title: "Test",
buttons: [
{
id: "btn",
text: "Test Button",
listeners:
{
click:
{
fn: function (el, e) {
Ext.msg.alert('Alert','test');
}
}
}
}
],
autoLoad: {
url: "index.html",
nocache: true,
mode: "iframe",
showMask: true,
triggerEvent: "show",
reloadOnEvent: true
}
}
new Ext.Window(windowConfig)
}
Window rendered perfectly using javascript too except LinkButton. it draws normal button rather than LinkButton but i need link button just like server side ext control. Any help will be appreciated.
From your code snippet I am assuming you are referring to Ext.NET 1.x and Ext JS 3.x.
If so, by default, when using the buttons configuration option for a new Ext.Window, the default component used will be Ext.Buttons.
LinkButtons are a useful extension from Ext.NET, and they have their xtype as netlinkbutton so you would have to explicitly set that, for example:
new Ext.Window({
title: "Test",
height: 300,
width: 300,
buttons: [{
id: "btn",
xtype: 'netlinkbutton',
text: "Test Button",
listeners: {
click: {
fn: function (el, e) {
Ext.Msg.alert('Alert', 'test');
}
}
}
}]
}).show();
Notice the key thing is xtype: netlinkbutton
Hope that helps!
P.S. Note that in Ext.NET 3, the LinkButton is renamed to HyperLinkButton and its xtype is now nethyperlinkbutton.
use netlinkbutton as xtype in ExtJs. netlinkbutton is exactly what LinkButton is in Ext.net
Related
First of all to stress it: I'm using sencha modern.
Well consider the following view:
Ext.define('myApplication.view.main.OrderView', {
extend: 'Ext.Container',
xtype: 'ordercontainer',
controller: 'order',
requires: [
'Ext.MessageBox',
'Ext.layout.Fit'
],
viewModel: 'main',
defaults: {
tab: {
iconAlign: 'top'
},
flex: 1
},
layout: 'vbox',
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
click: 'onClick'
}
},
]
});
With the corresponding controller:
Ext.define('myApplication.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
onClick: function () {
debugger;
alert('onClick');
}
});
now I can see the button when the page is loaded. I expect the onClick function to be called (as per guide). However it is not. I don't see any alert, nor will (when development console is open in chrome) the debugger halt on the onClick function.
If I change the button to use a handle and use code-behind it works. Yet the view controller doesn't work. This shouldn't fail right? Or did I once again fall into the trap of using a guide for classic?
It's because in Modern the components doesn't have event click but tap
So change your code like this:
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
tap: 'onClick'
}
},
]
I have a little problem with my KendoUi-grid. It's very simple :
JS File
$("#gridPlannif").kendoGrid({
datasource: ds_VEHICULE_SANSDATEFIN,
height: 200,
toolbar: ["create"],
sortable: true,
filterable: true,
scrollable: true,
columns: [{
field: "sDateArriveePrevue",
title: "Arrivée à partir du",
}, {
[... some columns... ]
},{
command: ["edit", "destroy"], title: " ", width: "200px" }
],
editable: {
mode: "popup",
[... some configurations ... ]
}
});
Controler
public ActionResult UpdateVehicule([DataSourceRequest]DataSourceRequest request, Planification vehicule)
{
try
{
if (this.ModelState.IsValid)
{
[...]
}
else
{
[...]
}
return Json(new[] { vehicule }.ToDataSourceResult(request, ModelState));
}
catch (Exception e)
{
return Json(new[] { vehicule });
}
}
View (.ascx)
[...]
<script>
ds_VEHICULE_SANSDATEFIN = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: '<%= Url.Action("GetVehicules_SansDateFin", "Plannification") %>'
},
update: {
url: '<%= Url.Action("UpdateVehicule", "Plannification") %>'
},
destroy: {
url: '<%= Url.Action("DeleteVehicule", "Plannification") %>'
},
create: {
url: '<%= Url.Action("AddVehicule", "Plannification") %>'
}
}
});
</script>
[...]
Problems
-> First problem : the datasource definition doesn't works.. I must do that instructions after grid initialisation :
$("#gridPlannif").data("kendoGrid").setDataSource(ds_VEHICULE_SANSDATEFIN);
$("#gridPlannif").data("kendoGrid").dataSource.read();
$("#gridPlannif").data("kendoGrid").refresh();
Thanks to that, grid display data correctly.
-> Second problem, the most important :
"add", "edit" and "destroy" doesn't call controller. With firebug, I see no call to the controller, I don't know why. I use on the same page a Scheduler component and it works, it uses the same functions on the controller to add / update / delete.
Someone has a suggestion ?
Thank you.
It sounds like your JavaScript library code for " $("#gridPlannif").kendoGrid({ " is not wrapped by a document.ready (assuming you are also using jQuery) and loading before the View's JavaScript code (class libraries load before View code, unless told otherwise).
So, be sure to wrap your JavaScript library code like this:
$(function() { // This is jQuery shorthand for document.ready
$("#gridPlannif").kendoGrid({
datasource: ds_VEHICULE_SANSDATEFIN,
height: 200,
toolbar: ["create"],
sortable: true,
filterable: true,
scrollable: true,
columns: [{
field: "sDateArriveePrevue",
title: "Arrivée à partir du",
}, {
[... some columns... ]
},{
command: ["edit", "destroy"], title: " ", width: "200px" }
],
editable: {
mode: "popup",
[... some configurations ... ]
}
});
What this will do is allow all of the View page code to render, including the inline <script> blocks defined before it tries to wire up the Kendo Grid. All of this to make sure the Data Source exists prior to trying to call it from the Kendo Grid initialization.
I have some trouble using an Ext.Panel in Sencha Touch 2.2. It works at first, but after building it can't be closed though hideOnMaskTap is true.
Here's my code:
MinPanel.js
Ext.define('MinimalPanelExample.view.MinPanel', {
extend: 'Ext.Panel',
requires: [
'Ext.dataview.List'
],
config: {
id: 'minPanel',
width: '320px',
height: '480px',
modal: true,
hideOnMaskTap: true,
html: 'minimal panel',
items: [
{
xtype: 'list',
width: '100%',
height: '100%'
}
]
}
});
Adding it in Main.js:
var minPanel = Ext.create('MinimalPanelExample.view.MinPanel');
[...]
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2',
items: [
{
xtype: 'button',
text: 'Button',
listeners: {
tap: function(button) {
minPanel.showBy(button);
}
}
}
],
},
What's curious is that the list inside the panel isn't even shown if I run the built package, it just shows the html: 'minimal panel'. There's no warnings in the Javascript console, though.
Any ideas about why that happens?
Also, feel free to tell me if my way of creating / accessing the panel in the first place is wrong.
Figured it out. You can't just Ext.create on top of the Main view file, it has to be somewhere in the Ext.define block. It works if I create the MinPanel in an initialize listener, and then get it via Ext.getCmp('minPanel') when the user presses the button.
I have following problem. I have grid with tbar. Inside tbar I have number of Ext.form.field.Trigger.
When the user click on trigger button I want to filter the store using function that is provided with grid. I want to define functionality of triggerclick inside defined class, so I can reuse this component with different grid.
So, in short I want to find the panel where clicked component is placed and call panel function, or pass reference of panel to triggerclick, or fire an event with some parameter that will calculated based on where the button was clicked, or maybe there is a better method to accomplish this.
The code (FilterField -> extension of trigger):
Ext.define('GSIP.core.components.FilterField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.filterfield',
initComponent: function() {
this.addEvents('filterclick');
this.callParent(arguments);
},
onTriggerClick: function(e, t) {
//Ext.getCmp('gsip_plan_list').filterList(); - working but dont want this
//this.fireEvent('filterclick'); - controller cant see it,
//this.filterList; - is it possible to pass scope to panel or reference to panel
//e.getSomething() - is it possible to get panel via EventObject? smth like e.getEl().up(panel)
}
});
code of panel:
Ext.define('GSIP.view.plans.PlanReqList', {
extend: 'Ext.grid.Panel',
alias: 'widget.gsip_devplan_list',
id: 'gsip_plan_list',
title: i18n.getMsg('gsip.view.PlanReqList.title'),
layout: 'fit',
initComponent: function() {
this.store = 'DevPlan';
this.tbar = [{
xtype: 'filterfield',
id: 'filter_login',
triggerCls: 'icon-user',
//scope:this - how to pass scope to panel without defining onTriggerClick here
// onTriggerClick: function() {
// this.fireEvent('filterclick'); //working event is fired but controller cant see it
// this.filterList; //this is working but i dont want to put this code in every filterfield
// },
// listeners : {
// filterclick: function(btn, e, eOpts) { //this is working
// }
// },
}];
this.columns = [{
id: 'id',
header: "Id",
dataIndex: "id",
width: 50,
sortable: true,
filterable: true
}, {
header: "Name",
dataIndex: "name",
width: 150,
sortable: true,
filterable: true
}, {
header: "Author",
dataIndex: "author",
sortable: true,
renderer: this.renderLogin,
filterable: true
}];
this.callParent(arguments);
},
filterList: function() {
this.store.clearFilter();
this.store.filter({
property: 'id',
value: this.down("#filter_id").getValue()
}, {
property: 'name',
value: this.down("#filter_name").getValue()
});
},
renderLogin: function(value, metadata, record) {
return value.login;
}
});
part of code of Controller:
init: function() {
this.control({
'attachments': {
filesaved: this.scanSaved,
}
}, {
'scan': {
filesaved: this.attachmentSaved
}
}, {
'#filter_login': {
filterclick: this.filterStore //this is not listened
}
});
},
filterStore: function() {
console.log('filtering store');
this.getPlanListInstance().filter();
},
Controller can listen to anything. Just need to specify exactly what to. But I would fire events on the panel level - add this into your trigger handler:
this.up('panel').fireEvent('triggerclicked');
I have an ActionSheet and a Panel in Sencha Touch 2. I want to show the ActionSheet overlay when the icon-map is clicked in the panel, how can I do that?
Panel.js
Ext.define('app.view.principalTabPanel', {
extend: 'Ext.tab.Panel',
config: {
ui: 'light',
items: [
{
xtype: 'mappanel',
title: 'Map',
iconCls: 'locate'
}
],
tabBar: {
docked: 'bottom',
ui: 'light'
}
}
});
asking.js
Ext.define('app.view.takePhoto', {
extend: 'Ext.ActionSheet',
config: {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
}
});
You can do this by adding a listener to your tab inside the tab object of your item.
{
xtype: 'mappanel',
title: 'Map',
iconCls: 'locate'
tab: {
listeners: {
tap: function() {
var sheet = Ext.create('app.view.takePhoto');
sheet.show();
}
}
}
}
Inside that listener, we create a new instance of your app.view.takePhoto class and show it.
I ran into the same problem after changing show() to showBy().
Specifying the html id instead of the component did the trick
.showBy(Ext.get('ext-tab-5'));
instead of
.showBy('settingsTab')
seems like the method can only be called on DOM elements.
Hope this helps somehow.