PDA

View Full Version : [CLOSED] multiline text not working in button



pawangyanwali
Nov 15, 2012, 8:12 PM
I needed to add a multiline text button but is not rendering after the <br/> element. How can i achieve this as sencha button works with <br/> tag
5095

@(Html.X().Panel()
.X(10)
.Y(10)
.Hidden(true)
.ID("pnlAppConf")
.Layout(LayoutType.HBox)
.Border(false)
.AutoDoLayout(true)
.Items(i=>
{
i.Add(
(@Html.X().Button()
.ID("btnVisualGlobal")
.Height(100)
.Width(100)
.IconUrl("../resources/icons/Flag_red.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Text("Visual Global <br/> Constants")


//.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
//de.Click.ExtraParams.Add(new { obj = "App Config" });
//})
.Margin(15)
.Handler("SlidePanelReverse(this);")
));
i.Add(

(@Html.X().Image()
.ImageUrl("../resources/icons/right-arrow.png")
.Align(System.Web.UI.WebControls.ImageAlign.AbsMid dle)
.Width(100)
.Height(100)
.Margin(15)
));

i.Add(
(@Html.X().Button()
.ID("btnSecurity")
.Height(100)
.Width(100)

.IconUrl("../resources/icons/Flag_blue.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Text("Security")
//.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");


//})
.Margin(15)

));
}

)

)

Baidaly
Nov 16, 2012, 12:18 AM
You can Html field to put some html tag:



<style>
.x-btn-default-large .x-btn-icon {
height: 48px !important;
}

.x-btn-default-large .x-btn-inner {
padding-top: 48px !important;
}
</style>
@(Html.X().Panel()
.X(10)
.Y(10)
.Hidden(false)
.ID("pnlAppConf")
.Layout(LayoutType.HBox)
.Border(false)
.AutoDoLayout(true)
.Items(i =>
{
i.Add(
(@Html.X().Button()
.ID("btnVisualGlobal")
.Height(100)
.Width(100)
.IconUrl("../Content/Flag_red.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Scale(ButtonScale.Large)
.Html("Visual <br /> <b> Global </b> <br/> Constants")
.Margin(15)
.Handler("SlidePanelReverse(this);")
));

i.Add(
(@Html.X().Image()
.ImageUrl("../Content/Forward.png")
.Align(System.Web.UI.WebControls.ImageAlign.AbsMid dle)
.Width(100)
.Height(100)
.Margin(15)
));

i.Add(
(@Html.X().Button()
.ID("btnSecurity")
.Height(100)
.Width(100)
.IconUrl("../Content/Flag_blue.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Scale(ButtonScale.Large)
.Html("Security <br /> is <br /> <i>important</i>")
.Margin(15)
));
}
)

)

Daniil
Nov 16, 2012, 7:25 AM
Hi,


sencha button works with <br/> tag

Could you demonstrate a code sample?

pawangyanwali
Nov 16, 2012, 3:02 PM
Hi,



Could you demonstrate a code sample?

I tried Html but did not work, I will post the code shortly.
5114
Here is the code
Style Sheet


<style>
.x-item-selected div.ux-desktop-shortcut-bg
{

width: 0px !important;
height: 0px !important;

}

.x-view-over .ux-desktop-shortcut-bg {
width: 0px !important;
height: 0px !important;
}
.ux-wallpaper {
display: none;
}

.ux-desktop-shortcut-text {
color: black;
}

.x-btn-default-large .x-btn-icon
{
height: 48px;
border-radius: 10px;
}

.x-btn-default-large .x-btn-inner
{
line-height: 115px !important;
text-align: left;
display: inline;
float: left;

}
</style>


Desktop.cshtml

@using System.Collections;
@using System.Linq.Expressions;

@Html.X().ResourceManager()
@{
ViewBag.Title = "Desktop";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section headtag
{
<link rel="stylesheet" href="@Url.Content("~/resources/css/main.css")" />

<script src="@Url.Content("~/resources/js/main.js")"></script>

}
@section example
{
@(Html.X().Desktop()
.ID("compdesktop")
.Listeners(l => l.Ready.Handler = "HideComponent(this.desktop, this);")
.DesktopConfig(
(@Html.X().DesktopConfig()
.DDShortcut(false)
.AlignToGrid(true)
.ContentFromPartial("DesktopModule")
)

)
)

}


DesktopController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CompDesktop.Models;
using Ext.Net;
using Ext.Net.MVC;

namespace CompDesktop.Controllers
{
[DirectController]
public class DesktopController : Controller
{
//
// GET: /Desktop/

public ActionResult Desktop()
{
return View(new ModuleBuilder().BuildModules());
}
public ActionResult Index()
{
return View();
}
public ActionResult GetTreeNodes(string node)
{
return this.Content(new FavModel().BuildNodes().ToJson());
}
[DirectMethod]
[OutputCache(Duration = 86400, VaryByParam = "theme")]
public DirectResult GetThemeUrl(string theme)
{
Theme temp = (Theme)Enum.Parse(typeof(Theme), theme);

this.Session["Ext.Net.Theme"] = temp;

return this.Direct(temp == Ext.Net.Theme.Default ? "Default" : MvcResourceManager.GetThemeUrl(temp));
}


}
}

DesktopModule.cshtml

@using CompDesktop.Models;
@(Html.X().Panel()
.X(10)
.Y(10)
.ID("breadCrumb")
.Layout(LayoutType.Table)
.Items(i=>

i.Add(
(@Html.X().HyperLink()
.Text("Home")

)
)


)
)
@(Html.X().Panel()
.X(10)
.Y(10)
.ID("pnlMain")
.Layout(LayoutType.HBox)
.Border(false)
.AutoDoLayout(true)
.Items(i=>
{


foreach(var model in Model)
{
var myModel = model as CompDesktop.Models.Modules;
i.Add(
(@Html.X().Button()
.Height(100)
.Width(100)
.ID ( myModel.ModuleId.ToString())
.IconUrl ( myModel.IconName)
.IconAlign( IconAlign.Top)
.Cls( "x-btn-default-large")
.Html ( myModel.Text)
.Margin ( 15)
.Handler ( "SlidePanel(this)")
)
);


//var myModel = model as CompDesktop.Models.Modules;
//var btn = new Button();
//btn.ID = myModel.ModuleId.ToString();
//btn.IconUrl = myModel.IconName;
//btn.IconAlign = IconAlign.Top;
//btn.Cls = "x-btn-default-large";
//btn.Html = myModel.Text;
//btn.Margin = 15;
//btn.Handler = "SlidePanel(this)";

}





// i.Add(
// (@Html.X().Button()
// .ID("btnAdminApp")
// .Height(100)
// .Width(100)
// .IconUrl("../resources/icons/Box.png")
// .IconAlign(IconAlign.Top)
// .Cls("x-btn-default-large")
// .Text("App Config")
// //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
// //de.Click.ExtraParams.Add(new { obj = "App Config" });
// //})
// .Margin(15)
// .Handler("SlidePanel(this);")
// ));
// i.Add(

// (@Html.X().Image()
// .ImageUrl("../resources/icons/right-arrow.png")
// .Align(System.Web.UI.WebControls.ImageAlign.AbsMid dle)
//.Width(100)
//.Height(100)
//.Margin(15)
// ));

//i.Add(
// (@Html.X().Button()
// .ID("btnCycleApp")
// .Height(100)
// .Width(100)

// .IconUrl("../resources/icons/Chart_bar.png")
// .IconAlign(IconAlign.Top)
// .Cls("x-btn-default-large")
// .Text("Cycle Config")
// //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");


// //})
// .Margin(15)

// ));
}

)

)
@(Html.X().Panel()
.X(10)
.Y(10)
.Hidden(true)
.ID("pnlAppConf")
.Layout(LayoutType.HBox)
.Border(false)
.AutoDoLayout(true)
.Items(i=>
{
i.Add(
(@Html.X().Button()
.ID("btnVisualGlobal")
.Height(100)
.Width(100)
.IconUrl("../resources/icons/Flag_red.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Text("Visual Global <br/> Constants")
//.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
//de.Click.ExtraParams.Add(new { obj = "App Config" });
//})
.Margin(15)
.Handler("SlidePanelReverse(this);")
));
i.Add(

(@Html.X().Image()
.ImageUrl("../resources/icons/right-arrow.png")
.Align(System.Web.UI.WebControls.ImageAlign.AbsMid dle)
.Width(100)
.Height(100)
.Margin(15)
));

i.Add(
(@Html.X().Button()
.ID("btnSecurity")
.Height(100)
.Width(100)

.IconUrl("../resources/icons/Flag_blue.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Text("Security")
//.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");


//})
.Margin(15)

));
}

)

)

FavModel.cs

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using Ext.Net;

namespace CompDesktop.Models
{
public class FavModel
{
public NodeCollection BuildNodes()
{
//build a sample node
NodeCollection nc = new NodeCollection(false);
for(int i = 0; i < 10; i++)
{
Node n = new Node()
{
Text = "Node " + i,
IconCls = "",
Icon = Icon.Application

};

AddChildNode(n);
nc.Add(n);
}
return nc;
}

private void AddChildNode(Node n)
{
for(int i = 0; i < 5; i++)
{
n.Children.Add(new Node() {Text="Child " + i, Icon = Icon.ApplicationDouble, Leaf = true});
}
}

}

public class ModuleBuilder
{
internal static string IconsRoot = "~/resources/icons";
public List<string> GetIconsNames()
{
string path = HttpContext.Current.Server.MapPath(IconsRoot);
var root = new DirectoryInfo(path);
FileInfo[] fileInfo = root.GetFiles();

List<string> icons = (from file in fileInfo let img = System.Drawing.Image.FromFile(file.FullName) where img.Width == 48 && img.Height == 48 select "../resources/icons/" + file.Name).ToList();
return icons;
}


public List<Modules> BuildModules()
{

int num = new Random().Next(0, 10);
var modules = new List<Modules>();
var icons = GetIconsNames();


for (int i = 0; i < 10; i++)
{
var mod = new Modules()
{
Name = "Module" + i,
IsEnabled = num % 2 == 0,
Disbaled = num % 2 == 0 ? "disabled" : "",
Enabled = num % 2 == 0 ? "" : "disabled",
ModuleId = i,
IconName = icons[i],
Text = "Module <br/> <b>" + i + "</b>"
};
modules.Add(mod);
}

return modules;
}
}

public class Modules
{
public string Name { get; set; }
public string IconName { get; set; }
public bool IsEnabled { get; set; }
public int ModuleId { get; set; }
public string Disbaled { get; set; }
public string Enabled { get; set; }
public int SortOrder { get; set; }
public string Text { get; set; }

}
}

pawangyanwali
Nov 16, 2012, 6:45 PM
You can Html field to put some html tag:



<style>
.x-btn-default-large .x-btn-icon {
height: 48px !important;
}

.x-btn-default-large .x-btn-inner {
padding-top: 48px !important;
}
</style>
@(Html.X().Panel()
.X(10)
.Y(10)
.Hidden(false)
.ID("pnlAppConf")
.Layout(LayoutType.HBox)
.Border(false)
.AutoDoLayout(true)
.Items(i =>
{
i.Add(
(@Html.X().Button()
.ID("btnVisualGlobal")
.Height(100)
.Width(100)
.IconUrl("../Content/Flag_red.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Scale(ButtonScale.Large)
.Html("Visual <br /> <b> Global </b> <br/> Constants")
.Margin(15)
.Handler("SlidePanelReverse(this);")
));

i.Add(
(@Html.X().Image()
.ImageUrl("../Content/Forward.png")
.Align(System.Web.UI.WebControls.ImageAlign.AbsMid dle)
.Width(100)
.Height(100)
.Margin(15)
));

i.Add(
(@Html.X().Button()
.ID("btnSecurity")
.Height(100)
.Width(100)
.IconUrl("../Content/Flag_blue.png")
.IconAlign(IconAlign.Top)
.Cls("x-btn-default-large")
.Scale(ButtonScale.Large)
.Html("Security <br /> is <br /> <i>important</i>")
.Margin(15)
));
}
)

)


Also the problem that we are having is the icons are not rearranging if the browser size is changed despite of DoAutolayout is set to true.

Baidaly
Nov 17, 2012, 1:35 AM
I don't see where are you setting value for Html attribute? There is only myModel.Text, I don't know what you have in this Field.

Can you run my example and make screenshot and make screenshot of html markup of buttons in FireBug or Chrome like this 5123?


Also the problem that we are having is the icons are not rearranging if the browser size is changed despite of DoAutolayout is set to true.

You have to do this manually, because you are using Absolute Positioning. Also, I recommend to you look following examples:

http://examples2.ext.net/#/Layout/ColumnLayout/Basic/
http://examples2.ext.net/#/Layout/HBoxLayout/Basic/
http://examples2.ext.net/#/Layout/VBoxLayout/Basic/
http://examples2.ext.net/#/Layout/TableLayout/Simple_in_Markup/